弹性盒布局方法示例

弹性盒多布局方法
1.flex-direction：row; 默认x主轴 column 为y轴 ，row-reverse x轴为主轴，并反向排列 ，column-reverse Y轴为主轴并反向排列。
2.主轴对齐方式 justify-content: center 居中 space-between 两端对齐 space-around 自动间距对齐，flex-start开始位置 flex-end 结束位置
3.侧轴对齐方式 align-items 属性值常用center 居中 ，flex-start 开始位置 flex-end 结束位置 ，baseline 和flex-start等效 stretch 拉伸
4 换行 flex-wrap 换行wrap 默认不换行nowrap ，wrap-reverse 反向换行
5.控制行与行间距问题: align-content 属性值：flex-start 起始位置 flexend 结束位置 ，Center 居中 space-around自动分配间距 ，space-between 两端 stretch（默认）拉伸
6.控制某一个子元素在侧轴的对齐方式align-self 属性值：auto，strech center flex-start flex-end
7.控制子元素排列顺序order 属性值数字，数字越大越往后排列，能接受负数
8.剩余空间分配： flex：1;(把剩余空间全分配给当前元素)