Flexbox [响应式设计笔记]

使用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