弹性布局属性

1、display flex | inline-flex;(适用于父类元素上)

(1) flex：将对象作为弹性伸缩盒显示。

(2) inline-flex：将对象作为内联块级弹性伸缩盒显示。

2、flex-flow (适用于父容器上)复合属性。

(1) flex-direction（适用于父容器的元素上）：设置或检索伸缩盒对象的子元素在父容器中的位置。

① row：横向从左到右排列（左对齐），默认的排序方式。

② row-reverse：反转横向排列（右对齐）

③ column：纵向排列。

④ column：反转纵向排列，从后往前排，最后一项在最上面。

(2) flex-warp （适用于父容器上） 设置或检索伸缩盒对象的子元素超出父容器时是否换行。

① nowrap：当子元素溢出父容器时不换行。

② wrap：当子元素溢出父容器时自动换行。

③ wrap-reverse：当子容器溢出父容器时自动换行，方向同wrap反转排序。

3、justify-content (适用于父容器上) 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

(1) flex-start：弹性盒子元素将向起始位置对齐。

(2) flex-end：弹性盒子元素将向结束位置对齐。

(3) center：弹性盒子元素将向中间位置对齐。

(4) space-between：弹性盒子元素会平均地分部在行里。

(5) space-around：弹性盒子元素会平均地分部在行里，两端保留子元素与子元素之间间距大小的一般。

4、align-items （适用于父容器上）设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

(1) flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

(2) flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

(3) center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。

(4) baseline：如弹性盒子的行内轴与侧轴为同一条，则该值与‘flex-start’等效。其他情况下该值将与基线对齐。

5、align-self （适用于弹性盒模型子元素）设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。

6、align-content （适用于父容器上） 设置或检索弹性盒堆叠伸缩行的对齐方式。

7、order （适用于弹性盒模型容器子元素）用整数来定义排序顺序，数值小的排在前面。可以为负值。

8、flex （适用于弹性盒模型子元素）复合属性。设置或检索伸缩盒对象的子元素如何分配空间。

（1）none：none关键字的计算值为：0 0 auto

（2）flex-grow flex-shrink flex-basis

（3）flex-grow根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

（4）flex-shrink 设置或检索弹性盒子的伸缩比率。

（5）flex-basis

《1》auto：无特定宽度值，取决于其他属性。

《2》用长度或百分比来定义宽度。不允许负值。