使用Flexbox
基础
将布局容器的显示属性设为display : flex ;
排列方式
容器本身属性
justify-content: 设置水平方向上子布局的排列方式
align-items: 设置垂直方向上的子项布局排列方式
子项属性
align-self:
排列属性的值
[center|flex-star|flex-end|space-around|space-between|space-evenly]
flex-wrap
flex-wrap:wrap 子项占满容器一行后自动在换行重新排列
收缩与伸长
flex-basis: 子项重新在flex容器指定大小 可以按比例或者像素
flex-grow: 子项在容器大小增长时 子项按比例拉长
flex-shrink:子项在容器大小减少时 子项按比例收缩
justify-content.png
自学此内容时用的参考资料:
http://www.css88.com/archives/7760
