CSS弹性盒布局

弹性伸缩布局的使用

display

值：
flex 将容器盒作为块级弹性伸缩盒显示。
inline-flex：将容器盒作为内联级弹性伸缩盒显示。
实际现实中 这两个值没区别。

direction

表示容器盒内元素的排列顺序。值：
row:从左到右排列
row-reverse：从右到左排列
column：从上倒下排列
column-reverse从下到上排列

flex-wrap

设置无法容纳时，自动换行。值：
nowrap：不换行
wrap：自动换行
wrap-reverse：自动换行，方向和wrap相反

justify-content

值：
flex-start：伸缩项目以起始点靠齐
flex-end：伸缩项目以结尾靠齐
center：以中心点靠齐
space-between：伸缩项目平均分布
space-around：同上但两段保留一般的空间

align-items

处理额外空间。值：
flex-start：以顶部为基准，清理底部的额外空间
flex-end：以底部为基准，清理顶部的额外空间
center：以中间为基准，清理上下部分的额外空间
baseline：以基线为基准，清理额外的空间
stretch：伸缩项目填充整个容器，默认值

align-self

处理额外空间。值：
与align-items的值一样，需要用nth-child（）设置某一个需要处理的伸缩项目

flex

设置伸缩项目分配比例

order

设置伸缩项目出现的位置

下面为例子代码，感兴趣可以自己动手试试。