flexbox
簡介：
彈性布局(flexible box)
.box { display:flex; } //聲明為flex布局
.box { display:inline-flex }//行內元素聲明為flex
.box { display:flex; display:-webkit-flex; }//safafi
注意：設置了flex布局之后，float/clear/vertical-align無效
圖形解析
外面的為容器container,里面的為項目flex item。
容器的屬性
-
flex-direciton//決定主軸方向
flex-direction: row | row-reverse | column | column-reverse;
- flex-wrap//決定換行方式
flex-wrap: nowrap | wrap | wrap-reverse;
不換行/換行/換行，第一行放在下方 - flex-flow//dircection和wrap的縮寫
默認值為row nowrap -
justify-content//主軸對齊方式
justify-content: flex-start | flex-end | center | space-between | space-around;```
-
align-items//對齊方式
align-items: flex-start | flex-end | center | baseline | stretch;```
-
align-content//多根軸線的對齊方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch;```
項目屬性
-
order//數值越大越靠前
-
flex-grow:<number>//放大倍數
- flex-shrink//定義縮小倍數
- flex-basis:<length>//項目長度
- flex前三個的所寫，默認為0 1 auto
auto(1 1 auto)/none(0 0 auto) - align-self//獨立出來的對齊方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;```
