彈性盒子（display flex）總結

flexbox 是 flexible box 的簡稱（注：意思是「靈活的盒子容器」），是 css3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的螢幕尺寸和裝置下可**地展現出來。

它之所以被稱為 flexbox ，是因為它能夠擴充套件和收縮 flex 容器內的元素，以最大限度地填充可用空間。與以前布局方式（如 table 布局和浮動元素內嵌塊元素）相比，flexbox 是乙個更強大的方式：

採用 flex 布局的元素，稱為 flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 flex 專案（flex item），簡稱"專案"。

在 flexbox 模型中，有三個核心概念：

– flex 項（注：也稱 flex 子元素），需要布局的元素

– flex 容器，其包含 flex 項

– 排列方向（direction），這決定了 flex 項的布局方向

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

order 決定彈性元素(也就是彈性盒子裡的小div等)的排列順序，數字越小，越靠前

flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。

如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。

flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。

如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。

負值對該屬性無效。

align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

.item

彈性布局預設不改變專案的寬度，但是它預設改變專案的高度。如果專案沒有顯式指定高度，就將佔據容器的所有高度。參考：