flex

老版本的flex

需将display设置为box。

容器的布局方向

-webkit-box-orient控制主轴是哪一根。

-webkit-box-orient:horizontal;//主轴为水平方向
-webkit-box-orient:vertical;//主轴为水平方向

容器的排列方向

-webkit-box-dirextion控制主轴方向。

-webkit-box-direction:narmal;//从左往右（从上往下）
-webkit-box-direction:reverse//从右往左（从下往上）

富裕空间的管理

主轴：-webkit-box-pack。

主轴为水平方向时：

-webkit-box-pack:start;//在右边
-webkit-box-pack:end;//在左边
-webkit-box-pack:center;//在两边
-webkit-box-pack:justify;//在项目之间

 

主轴为垂直方向时：

-webkit-box-pack:start;//在下面
-webkit-box-pack:end;//在上面
-webkit-box-pack:center;//在两边
-webkit-box-pack:justify;//在项目之间

 侧轴：-webkit-box-align。

侧轴为水平方向时：

-webkit-box-align:start;//在右边
-webkit-box-align:end;//在左边
-webkit-box-align:center;//在两边

 侧轴为垂直方向时：

-webkit-box-align:start;//在下面
-webkit-box-align:end;//在上面
-webkit-box-align:center;//在两边

 项目的弹性空间管理

-webkit-box-flex:0;（默认值）。

新版本的flex

容器的布局方向，容器的排列方向

flex-direction控制主轴是哪一根，控制主轴方向

flex-direction:row;//从左往右
flex-direction:row-reverse;//从右往左
flex-direction:column;//从上往下
flex-direction:column-reverse;//从下往上

富裕空间的管理

主轴：justify-content

justify-content:flex-start;//富裕空间在主轴正方向
justify-content:flex-end;//富裕空间在主轴反方向
justify-content:center;//富裕空间在两边
justify-content:space-between;//富裕空间在项目两边
justify-content:space-around;//富裕空间在项目之间

 

侧轴：align-items

align-items:flex-start;//富裕空间在侧轴的正方向
align-items:flex-end;//富裕空间在侧轴的反方向
align-items:center;//富裕空间在两边
align-items:baseline;//基线对齐
align-items:stretch;//等高

新版本新增属性

容器

控制侧轴方向：flex-wrap。

flex-wrap:nowrap;//不换行
flex-wrap:wrap;//换行(flex-shrink失效)
flex-wrap:wrap-reverse;//侧轴从右往左（从下往上，flex-shrink失效）

多行多列时侧轴富裕空间的管理：align-content，将多行多列看成一个整体。单行单列时看align-items，多行多列时看align-content。

flex-direction和flex-wrap属性的简写：flex-flow;默认值flex-flow:row nowrap;

 

align-content:flex-start;//富裕空间在侧轴的正方向
align-content:flex-end;//富裕空间在侧轴的反方向
align-content:center;//富裕空间在侧轴的两边
align-content:space-between;//如果是一列一行和flex-start一样，如果是多列多行则在每一行之间
align-content:space-around;//如果是一行一列和center一样，如果是多行多列则在每一行两侧

 

项目

控制项目的排列顺序：order。数值越大排越后面。

控制单个项目的富裕空间：align-self。默认值为align-items。

align-self:flex-start;//富裕空间在侧轴正方向。
align-self:flex-end;//富裕空间在侧轴反方向。
align-self:center;//富裕空间在项目两边。
align-self:baseline;//所有的flex元素沿着基线对齐。
align-self:stretch;//基于容器的宽和高，按照自身的margin box和cross-size拉伸。

 

 项目弹性空间管理

flex-grow:将主轴上的富裕空间按比例分配到项目的width/height上。

项目收缩空间管理

flex-shrink:当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。 flex-shrink的默认值为1。

收缩值的计算：项目的收缩因素=（项目的收缩因子*项目的width/height）/所有项目width/height总和。移除空间=项目的收缩因素*超出的width/height。