弹性盒子详解

1. 弹性盒子分为两部分，父元素（flex container）和子元素（flex items）,如果方向为row，主轴就是水平，侧轴就是垂直
2. display(对flex-container设置)

display: other values | flex | inline-flex;

3. flex-direction（对flex container设置）

row(默认值)：从左向右排列
row-reverse：与row排列方向相反，从右向左排列
column：从上到下排列.
column-reverse：从下到上排列。

4. order(对flex items设置 )
   默认情况下，伸缩项目是按照文档流出现先后顺序排列。然而，“order”属性可以控制伸缩项目在他们的伸缩容器出现的顺序。

order:   //数值越大顺序越靠后

5. flex-wrap（对flex container设置）
   这个主要用来定义伸缩容器里是单行还是多行显示

nowrap(默认值)：伸缩容器单行显示
wrap：伸缩容器多行显示
wrap-reverse：伸缩容器多行显示,和wrap相反

6. flexflow(对flex container设置)
   是“flex-direction”和“flex-wrap”属性的缩写版本。同时定义了伸缩容器的主轴和侧轴。其默认值为“row nowrap”。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

例如：

div { flex-flow: row; }

div { flex-flow: row-reverse wrap-reverse; }

7 justify-content（对flex container设置）
这个是用来定义伸缩项目沿着主轴线的对齐方式。当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。

justify-content: flex-start | flex-end | center | space-between | space-around;
//flex-start(默认值)：伸缩项目向一行的起始位置靠齐。
//flex-end：伸缩项目向一行的结束位置靠齐。
//center：伸缩项目向一行的中间位置靠齐。
//space-between：伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置，最后一个伸缩项目在一行中最终点位置。
//space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。

8 align-content（对flex container设置）
这个属性主要用来调准伸缩行在伸缩容器里的对齐方式。(针对多行)

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

9 align-items（对flex container设置）

align-items: flex-start | flex-end | center | baseline | stretch
//flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
//flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 
//center：伸缩项目的外边距盒在该行的侧轴上居中放置。
//baseline：伸缩项目根据他们的基线对齐。
//stretch（默认值）：伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

10 align-self（对flex items设置）
用来在单独的伸缩项目上覆写默认的对齐方式。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

11 flex-grow（对于flex items设置）
根据需要用来定义伸缩项目的扩展能力

flex-grow: 

12 flex-shrink（对flex items设置）
根据需要用来定义伸缩项目收缩的能力

flex-shrink: ; 

13 flex-basis（对flex items设置）
这个用来设置伸缩基准值，剩余的空间按比率进行伸缩。

flex-basis:  | auto;
//如果设置为“0”，不考虑剩余空白空间。如果设置为自动，则按照flex-grow值分配剩余空白空间

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