css flexbox弹性盒子布局

css3中display新增的一个属性值：flex
一个元素定义了display:flex;便成为了一个弹性盒子（FlexBox）

• 使用了弹性盒子布局的元素称为**Flex容器（container）**这里简称“容器”，其内部的子元素自动成为容器成员（flex
  item）这里简称“项目”。
• 容器以两条垂直轴线为基准线，其中成员按照顺序依次排列的那根轴为主轴，而与主轴垂直的轴线便是侧轴。
• 弹性成员的宽高中，对应主轴方向的称为主轴尺寸、对应侧轴方向的称为侧轴尺寸。

容器属性

flex-direction
用来设置主轴方向，属性值有
row :设置水平方向为主轴，成员从左到右排列(这也是flex布局默认的主轴)
column：设置垂直方向为主轴，成员从上到下排列
row-reverse：设置水平方向为主轴，成员从右到左排列
column-reverse：设置与垂直方向为主轴，成员从下到上排列
inherit:继承父元素的flex-direction值，如果父元素不是弹性盒子布局，则主轴为row

flex-wrap
用来设置成员在容器中排列是否换行，属性值有
no-wrap：成员排列不换行（默认值）
wrap：成员排列换行
inherit:继承父元素的flex-wrap值，如果父元素不是弹性盒子布局，则为no- wrap
wrap-reverse：成员排列换行，且从侧轴终点与主轴起点开始排列

flex-flow：flex-direction+flex-wrap简写

justify-content
设置成员在主轴的排列情况，属性值有
flex-start：成员从主轴起点排列
flex-end：成员从主轴终点排列
center：成员排列在主轴中心
space-between：成员从主轴起点开始排列，如果有多个成员，则最后一个成员在主轴终点，成员不能填满容器时，成员之间的距离相等。
space-around：成员不能填满容器时，成员左右的间距相等
inherit:继承父元素的justify-content值，如果父元素不是弹性盒子布局，则为flex-start

align-items
设置成员在侧轴的排列情况，属性值有
stretch：当成员高度没有设置时，成员的侧轴尺寸拉伸到容器侧轴长度一致
flex-start：成员与容器侧轴起点对齐
flex-end：成员与容器侧轴终点对齐
center：成员在侧轴上居中
baseline：
inherit：继承父元素的align-items值，如果父元素不是弹性盒子布局，则为stretch

成员属性
align-self：设置成员自身在容器侧轴的排列，属性值与容器的align-items相同
order：设置当前成员的排列顺序，属性值为数值，数值越大排序越靠后，默认值为0，数值相同的则按照元素在源码中的顺序排列
flex-grow：成员主轴尺寸拉伸比例，属性值为数值，当容器有剩余空间时，默认为0（不拉伸），负值无效，容器主轴空余时数值越大拉伸越大。
flex-shrink:成员主轴尺寸收缩比例，属性值为数值，默认值是1，当值为0时表示当需要收缩时该成员不收缩。
flex-basis
成员的初始主轴尺寸，属性值有
auto：成员主轴尺寸同width属性（默认值）
px/%：设置成员的宽度同width
flex:flex-grow+flex-shrink+flex-basis