弹性布局

弹性布局--flex布局给盒子提供最大的灵活性。

• 解决元素居中问题(主要是垂直居中)

• 自动弹性伸缩，合适适配不同大小的屏幕，和移动端

使用弹性布局个人觉得分为几个步骤：

1、要将盒子设置成弹性盒子：

　　dispy:flex;

2、要确定一个主轴方向：

　　flex-direction:row（横向） |row-reverse |column（垂直） |column-reverse （主要就是row与columm）

　　flex-direction:row;  默认不写

　　flex-direction:row-reverse;

　　flex-direction:column;

　　flex-direction:column-reverse;

 使用时往往第二步骤是省略的因为flex-direction的默认值为row即从左往右符合大多数的使用场景可以不写，但是要垂直排列或者反方向时时必写此属性。

3、主轴方向确定后考虑对齐方式：

　　justify-content：flex-start（靠左对齐） |flex-end（靠右对齐）|center（沿主轴居中对齐）|space-between （两端对齐，靠着容器壁，剩余空间平分）|space-around （分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配）|space-evenly （平均对齐，不靠着容器壁，剩余空间平分）

　　justify-content:flex-start(与flex-direction:row一致默认不写)

　　justify-content:flex-end

　　justify-content:center 

　　justify-content:space-between 

 

 　　justify-content:space-around

 　　justify-content:space-evenly

4、其次还要考虑垂直方向的对齐方式，即交叉轴

　　align-items:flex-start（交叉轴起点对齐）| flex-end（交叉轴的终点对齐）| center（交叉轴的中点对齐）| baseline（ 项目的第一行文字的基线对齐）| stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。

 

　　align-items:flex-start

　　align-items:flex-end

 　　align-items:center

 

以上就基本可以完成弹性布局的基本使用。