使用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
自學此內(nèi)容時用的參考資料:
http://www.css88.com/archives/7760
