Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
.box{
display: inline-flex;/*行内元素Flex布局*/
}
Webkit内核的浏览器,必须加上-webkit前缀。
.box3{
display: -webkit-flex; /* Safari */
display: flex;
}
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
2、容器的6种属性
2.1flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。有4个值,分别是: row(默认值):主轴为水平方向,起点在左端;row-reverse:主轴为水平方向,起点在右端;column:主轴为垂直方向,起点在上沿;column-reverse:主轴为垂直方向,起点在下沿。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
![](https://i-blog.csdnimg.cn/blog_migrate/d9bdd970be5df2899abe49d3221d326a.png)
2.2flex-wrap属性
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。它可能取三个值。
(1)nowrap(默认):不换行。
(2)wrap:换行,第一行在上方。
(3)wrap-reverse:换行,第一行在下方。
2.3flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
2.4justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
2.5align-items属性
align-items属性定义项目在交叉轴上如何对齐。
2.6align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。