flex布局(弹性布局、伸缩布局)

flex是CSS3中的一种布局方式

主要介绍下弹性布局的常用的一些属性

当一个盒子设置为display:flex的时候,盒子会变为一个弹性盒子,盒子内部的子元素会默认沿着主轴方向排布,此时会引出主轴和侧轴的概念。

主轴:默认水平向右(类似于X轴)
侧轴:与主轴垂直的就是侧轴,默认垂直向下(类似于Y轴)

主轴方向（flex-direction)

弹性盒子的主轴方向默认水平向右,但是可以通过flex-direction这个属性改变主轴的方向,如下图:

取值	效果（主轴方向）
row	水平向右（默认）
row-reverse	水平向左
column	垂直向下
column-reverse	垂直向上

主轴对齐方式（justify-content）

取值:
flex-start：向主轴的开始位置对齐

flex-end：向主轴的结束位置对齐

center：居中对齐

space-around：让空白环绕盒子显示

space-between：让空白只在盒子之间显示

单行侧轴对齐方式（align-items）

取值

flex-start：向侧轴的开始位置对齐

flex-end：向侧轴的结束位置对齐

center：居中对齐

stretch：让子盒子的高度拉伸显示（默认值）
当盒子内的子元素没有高度时,会默认拉伸

是否换行（flex-wrap）

flex布局中，默认是单行显示的，如果子元素的宽度之和超出了父元素的宽度，此时子盒子会默认压缩显示。
此时，如果需要设置子元素换行显示(需加在父元素身上)，可以使用属性 flex-wrap

属性值	效果
nowrap	不换行（默认值）
wrap	换行

多行侧轴对齐方式（align-content）

之前align-items 只是针对于单行元素的侧轴对齐方式。
如果需要设置多行元素的侧轴对齐方式，此时需要使用 align-content 才行

取值（和align-items差不多）：

取值	效果
flex-start	向侧轴的开始位置对齐
flex-end	向侧轴的结束位置对齐
center	居中对齐
stretch	子元素高度拉伸显示（只有没设高才有效果）
space-around	空白环绕盒子显示
space-between	空白只在盒子之间显示

分配子元素空间（flex属性）

作用： 按照份数分配父元素主轴（宽度）的剩余空间

优先分配具体的宽度，剩余的空间再按照份数分配。

代码： flex:份数;

通过flex属性可以很轻松的完成圣杯布局。

子元素排序（order属性）

作用： 设置弹性盒子中子元素的排列顺序，数值越小，排列靠前，默认是0

代码： order：数字;

单个子元素侧轴对齐方式（align-self）

取值（和align-items取值一样）：

取值	效果
flex-start	向侧轴的开始位置对齐（默认相当于顶部对齐）
flex-end	向侧轴的结束位置对齐（默认相当于底部对齐）
center	居中对齐
stretch	子元素高度拉伸显示（只有没设高才有效果）