C3：弹性盒子的基本属性

设置在父元素上的值：

属性	描述
flex-direction	设置或检索伸缩盒对象的子元素在父容器中的位置。（默认row）
flex-wrap	设置或检索伸缩盒对象的子元素超出父容器时是否换行。（默认nowrap）
flex-flow	复合属性。设置或检索伸缩盒对象的子元素排列方式。
align-items	设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。（默认stretch）
align-content	设置或检索弹性盒堆叠伸缩行的对齐方式。（默认stretch）
justify-content	设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。（默认flex-start）

设置在子元素上的属性：

属性	描述
flex-grow	拉伸(默认0)
flex-shrink	设置或检索弹性盒的收缩比率(默认1)
flex-basis	设置或检索弹性盒伸缩基准值。(默认0)
flex	复合属性。设置或检索伸缩盒对象的子元素如何分配空间。
order(默认0)	设置或检索伸缩盒对象的子元素出現的順序。
align-self	子元素自身在侧轴（纵轴）方向上的对齐方式（默认auto）

设置弹性盒子：display
值：
flex：块级的弹性盒子
inline-flex：行级的弹性盒子
-webkit-flex：苹果和谷歌的兼容性

设置在父元素上的值
flex-direction：子元素在父容器中的位置（默认row）
值：
row：横向从左到右排列(左对齐)，默认排列
row-reverse：横向右对齐元素反转
column：纵向排列
column-reverse：反转纵向排列

flex-wrap：子元素换行方式（默认nowrap）
值：
nowrap：默认， 弹性容器为单行
wrap：弹性容器为多行
wrap-reverse：多行反转排列

flex-flow：flex-direction 和 flex-wrap复合写法

flex-flow:row nowrap;    //横向排列 单行
flex-flow:column wrap-reverse;   //纵向 多行反转排列（反转就是倒序）

align-items：垂直对齐（单行）（默认stretch）
值：
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制

align-content：垂直对齐（多行）（默认stretch）
值：
stretch：默认。各行将会伸展以占用剩余的空间。
flex-start：各行向弹性盒容器的起始位置堆叠。
flex-end：各行向弹性盒容器的结束位置堆叠。
center：各行向弹性盒容器的中间位置堆叠。
space-between：各行在弹性盒容器中平均分布。
space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

justify-content：水平对齐（默认flex-start）
值：
flex-start：弹性项目向行头紧挨着填充
lex-end：弹性项目向行尾紧挨着填充
center：弹性项目居中紧挨着填充
space-between：弹性项目平均分布在该行上
space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间

设置在子元素上的属性
flex-grow：拉伸(默认0)
自身收缩数/收缩总和*剩余空间

flex-basis：宽度(默认0)
px：像素值
%：百分值
auto（默认）：无特定宽度值，取决于其它属性值
content：基于内容自动计算宽度
flex：复合写法

flex-grow|flex-shrink|flex-basis

flex:1 1 300px;