Flex 布局语法
display:flex
display:inline-flex
二、容器的属性
1、flex-direction：决定主轴的方向
|
从左到右(默认值) |
从右到左 |
从上到下 |
从下到上 |
|
row |
row-reverse |
column |
column-reverse |
2、flex-wrap：换行和方向
|
不换行(默认值) |
换行，第一行在上方 |
换行，第一行在下方 |
|
nowrap |
wrap |
Wrap-reverse |
3、flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
4、justify-content：在主轴的对齐方式
|
左对齐(默认值) |
右对齐 |
居中 |
两端对齐，有间隔 |
每个都有间距 |
|
flex-start |
flex-end |
center |
space-between |
space-around |
5、align-items：在交叉轴如何对齐
|
上对齐 |
下对齐 |
居中 |
第一行文字的基线对齐 |
整个容器高端(默认值) |
|
flex-start |
flex-end |
center |
baseline |
stretch |
6、align-content多根轴线的对齐方式
|
上对齐 |
下对齐 |
居中 |
平均分布 |
间隔相等 |
占满(默认值) |
|
flex-start |
flex-end |
center |
space-between |
space-around |
stretch |
三、项目的属性
1、order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>;
}
2、flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
3、flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
4、flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
5、flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
6、align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}