css3屬性

1、box-sizing
有三種屬性值：border-box、content-box、inherit
設定寬度或者高度是否包含邊框和內邊距

2、flex
參考：https://segmentfault.com/a/1190000006741711
子類設定
flex-grow：設定彈性專案的放大比例，預設值為0
flex-shrink：設定彈性專案的收縮比例，預設值為1
flex-basis：設定彈性專案的寬度，預設值為auto

如果父級的空間足夠：flex-grow有效，flex-shrink無效。
如果父級的空間不夠：flex-shrink 有效，flex-grow無效。
flex的預設值：0 1 auto

align-self:auto | flex-start | flex-end | stretch |center

參考連結：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
父類設定

display:flex;

彈性專案是否換行

flex-wrap:wrap | norwrap | wrapreverse

設定彈性專案的流動情況

flex-direction:column | row | column-reverse | row-reverse

組合flex-direction+flex-wrap

flex-flow:0 1 auto;

設定彈性專案的分佈情況

justify-content:flex-start | flex-end | center | space-between | space-around;

屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用

align-content:flex-start | flex-end | center | space-between | space-around;

設定彈性專案

align-items:flex-start | flex-end | center | baseline | stretch