Flexbox

1、display : flex | flex-inline；用于伸缩容器；

2、flex-direction : row | row-reverse | column | column-reverse；用于伸缩容器；

• row(默认值)：在“ltr”排版方式下从左向右排列；在“rtl”排版方式下从右向左排列。

• row-reverse：与row排列方向相反，在“ltr”排版方式下从右向左排列；在“rtl”排版方式下从左向右排列。

• column：类似 于row，不过是从上到下排列

• column-reverse：类似于row-reverse，不过是从下到上排列。

3、flex-wrap : nowrap | wrap | wrap-reverse；用于伸缩容器；

• nowrap(默认值)：伸缩容器单行显示，“ltr”排版下，伸缩项目从左到右排列；“rtl”排版上伸缩项目从右向左排列。

• wrap：伸缩容器多行显示，“ltr”排版下，伸缩项目从左到右排列；“rtl”排版上伸缩项目从右向左排列。

• wrap-reverse：伸缩容器多行显示，“ltr”排版下，伸缩项目从右向左排列；“rtl”排版下，伸缩项目从左到右排列。（和wrap相反）

4、flex-flow : 是flex-direction 与 flex-wrap 的压缩版本，默认值是：row nowrap；

5、justify-content : flex-start | flex-end | center | space-between | space-around; 用于伸缩容器；

• flex-start(默认值)：伸缩项目向一行的起始位置靠齐。

• flex-end：伸缩项目向一行的结束位置靠齐。

• center：伸缩项目向一行的中间位置靠齐。

• space-between：伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置。

• space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。

6、align-item : flex-start | flex-end | center | baseline | stretch; 用于伸缩容器；

• flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。

• flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。

• center：伸缩项目的外边距盒在该行的侧轴上居中放置。

• baseline：伸缩项目根据他们的基线对齐。

• stretch（默认值）：伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

7、align-content : flex-start | flex-end | center | space-between | space-around | stretch; 用于伸缩容器；

• flex-start：各行向伸缩容器的起点位置堆叠。

• flex-end：各行向伸缩容器的结束位置堆叠。

• center：各行向伸缩容器的中间位置堆叠。

• space-between：各行在伸缩容器中平均分布。

• space-around：各行在伸缩容器中平均分布，在两边各有一半的空间。

• stretch（默认值）：各行将会伸展以占用剩余的空间。

8、order : <int>; 用于伸缩项目；“order”属性可以控制伸缩项目在伸缩容器出现的顺序。

9、flex-grow : <number>; 默认是：0；用于伸缩项目；

如果所有伸缩项目的“flex-grow”设置了“1”，那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你给其中一个伸缩项目设置了“flex-grow”值为“2”，那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍。

10、flex-shrink : <number> (默认值为： 1)；用于伸缩项目；伸缩项目的收缩能力；

11、flex-basis : <length> | auto (默认值为： auto) ;用来设置伸缩基准值，剩余的空间按比率进行伸缩；用于伸缩项目；

12、flex : 这是“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写。其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数。默认值为“0 1 auto”。

13、align-left :  flex-start | flex-end | center | baseline | stretch; 用于伸缩项目；

• flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。

• flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。

• center：伸缩项目的外边距盒在该行的侧轴上居中放置。

• baseline：伸缩项目根据他们的基线对齐。

• stretch（默认值）：伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。