CSS3之Flex弹性盒模型

2009年，W3C提出了一种新的方案——Flex布局，可以简便，完整，响应式的完成各种页面布局。目前，已经得到了所有浏览器的支持，可以放心的使用。

何为主轴，何为侧轴？

若flex-direction为默认row

若flex-direction为** row-reverse**

若flex-direction为column

若flex-direction为column-reverse

属性：

作用在flex容器上	作用在flex子项上
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-basis
align-content	flex
align-items	align-self

作用在父元素上属性及属性值：

• flex-direction ： 用来控制子项整体布局方向
  row ：默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
  row-reverse ：显示为行，但方向和row属性值是相反的。
  column ：显示为列。
  column-reverse ：显示为列，但方向和column属性值是相反的。

• flex-wrap ：用来控制子项单行显示还是换行显示
  nowrap ：默认值，表示单行显示，不换行。
  wrap ：宽度不够，换行显示。
  wrap-reverse ：宽度不足，换行显示，但方向是从下往上。

• flex-flow ：是flex-direction和flex-wrap的复合写法。第一个是方向，第二个是换行，中间空格隔开。

• justify-content ：决定主轴方向上子项的对齐和分布方式。
  flex-start ：默认值，表现为起始位置对齐
  flex-end ：表现为结束位置对齐
  center ：表现为居中对齐
  space-between ：表现为两端对齐，多余的空白间距只在元素中间区域分配
  space-around ：环绕，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，视觉上是中间空白宽度 是边缘空白的2倍。
  space-evenly ：匀称，视觉是子项左右宽度完全相等。

• align-items ：flex子项们相对于flex容器在侧轴方向上的对齐方式
  stretch ：默认值，flex子项拉伸。
  flex-start ：表现为容器顶部对齐。
  flex-end ：表现为容器底部对齐。
  center ：表现为容器垂直居中对齐。

• align-content ：可以看似与justify-content对立的属性，只针对多行起作用。
  stretch ：默认值，每项flex子元素都等比例拉伸。例如有两行，则每行拉伸为50%。
  flex-start ：表现为起始位置对齐
  flex-end：表现为结束位置对齐
  center：表现为居中对齐
  space-between：表现为两端对齐
  space-around：每行元素上下享有独立不重叠的空白区域
  space-evenly：每行元素完全上下等分

作用在子项属性及属性值：

• order：默认值为0，可以改变一个flex子项的排序位置，值越小的越靠前显示。
• flex-grow：默认值为0，意为扩展，扩展所占的空间就是除去元素外剩余的空白间隙。(有空隙此值才会生效。)
• flex-shrink：默认值为1，默认收缩。主要处理空间不足的时候，单个元素的收缩比例。可以设置为0，表示不收缩。
• flex-basis：定义分配剩余空间之前元素的默认大小，优先级比自定义大小高。
• flex：flex-grow,flex-shrink,flex-basis的复合写法，书写顺序如前。
• align-self：控制单独某一个flex子项的垂直对齐方式。

区分

• 当flex-direction:row; flex-wrap:wrap;（上图） 当flex-direction:row; flex-wrap:wrap-reverse;（下图）
  
  

• 当flex-direction:column; flex-wrap:wrap;（上图）当flex-direction:column; flex-wrap:wrap-reverse;（下图）
  
  

• 当flex-direction:row-reverse; （上图）当flex-direction:row; justify-content:flex-end;（下图）