search

Home >Web Front-end >CSS Tutorial >Flexible flexible box model CSS align-items property

Flexible flexible box model CSS align-items property

高洛峰
高洛峰Original
2017-02-23 09:58:551929browse


##Example

Centerly align the items of the flexboxe388a4556c0f65e1904146cc1a846bee element:

  1. ##p

  2. {

  3. display

    : flex;

  4. align

    -items:center;

  5. }

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手册网(www.shouce.ren)</title>
<style>
#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

#main div {
   -webkit-flex: 1; /* Safari 6.1+ */
   flex: 1;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。</p>
<p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。</p>

</body>
</html>
    6. Effect preview

Browser support

The number in the table indicates the version of the first browser that supports this attribute Number.

The number immediately following -webkit-, -ms- or -moz- is the first version that supports this prefix attribute.

Attributesalign-items7.0 -webkit-

Definition and usage

The align-items property defines the alignment of flex items in the direction of the cross axis (vertical axis) of the current row of the flex container.

Tip: The align-items property can be overridden using the align-self property of each flex object element.

21.0 11.0 20.0 9.0
12.1
##Inheritance: NoCan be animated: No. Please refer to Version: CSS3JavaScript Syntax:

 

CSS 语法


align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

Attribute value

Default: stretch
CSS3 animation properties, CSS3 animation examples.
object. style.alignItems="center" Effect preview
##initialSet this property to its default value. See initial.##More Flexible Flexible Box Model CSS For articles related to the align-items attribute, please pay attention to the PHP Chinese website!
Value Description Test
##stretch default value. Items are stretched to fit the container. Effect Preview
center The item is located in the center of the container. Effect preview
##flex-start The item is at the beginning of the container. Effect preview
##flex-end The item is at the end of the container. Effect preview
baseline The project is located on the baseline of the container. Effect Preview
Effect preview
##inherit Inherits this attribute from the parent element. See inherit.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Flexible flexible box model CSS align-self propertyNext article：Flexible flexible box model CSS align-self property

Related articles

See more