flex 容器的属性

《flex 容器的属性》正文开始，本次阅读大概4分钟。

容器的属性

设置了 flex 属性的容器可以通过设置其他属性值来设置容器的子元素的排列

以下6个属性可以设置在容器上：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

1、flex-direction（设置子元素的排列方向）

flex-direction 属性决定子元素的排列方向

.box{flex-direction:row|row-reverse|column|column-reverse;}

divclass=test02divclass=childrenp1/p/divdivclass=childrenp2/p/divdivclass=childrenp3/p/div/div

.test02{display:flex;flex-direction:row|row-reverse|column|column-reverse;}.test02.children{width:50px;height:50px;}

row（默认值）：主轴为水平方向，起点在左端；

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

2、flex-wrap属性（设置是否换行）

让弹性盒的子元素在必要的时候拆行，当不设置该属性值的话默认值是不换行的，如果容器装不下子元素的话子元素会进行相应的收缩。有三个属性值：

.box{flex-wrap:nowrap|wrap|wrap-reverse;}

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。下面分别对应：

3、flex-flow 属性（flex-direction和flex-wrap的结合）

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性，默认值为row nowrap。当然，该属性也可以只设置其中一个属性值。

.box{flex-flow:flex-direction||flex-wrap;}

4、justify-content属性（设置子元素在横轴上的排列）

justify-content属性定义了子元素在横轴上的对齐方式。

.box{justify-content:flex-start|flex-end|center|space-between|space-around;}

flex-start（默认值）：左对齐；　　　　

flex-end：右对齐；　　　　　　　　　　

center： 居中；　　　　　　　　　　

space-between：两端对齐，项目之间的间隔都相等；

space-around：每个子元素之间的间隔相等，且子元素之间的间隔比子元素与父元素的距离大一倍。

5、align-items属性（设置子元素在纵轴上的排列）

align-items 属性定义项目在纵轴上是如何排列的

.box{align-items:flex-start|flex-end|center|baseline|stretch;}

flex-start：交叉轴的起点对齐。　　　　

flex-end：交叉轴的终点对齐。　　　　

center：交叉轴的中点对齐。　　　　　　

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果子元素未设置高度 height 或设为auto，将占满整个容器的高度。如果子元素设置了宽度，则该属性值无效

6、align-content属性（设置每行子元素之间的排列方式）

align-content 属性定义了当有多行子元素时每行子元素之间排列方式，当只有一行子元素时即flex-wrap属性值为no-wrap时，该属性没有效果。

.box{align-content:flex-start|flex-end|center|space-between|space-around|stretch;}

stretch（默认值）：每行子元素默认排列，相当于只设置了lex-wrap:wrap，每行子元素间有一定间隔

flex-start：子元素从纵轴的起点开始排列，且行间没有间距

flex-end：与纵轴的终点对齐，且行间没有间距。　

center：与纵轴的中点对齐。　　　　

space-between：与纵轴两端对齐，轴线之间的间隔平均分布。

space-around：每行子元素的间隔都相等，且每行子元素之间的间隔比子元素到父元素的距离大一倍。