幫助理解彈性盒各個的屬性的小遊戲。
http://flexboxfroggy.com/

彈性盒

一、開啟彈性盒模型

1. display:flex;

2. display:inline-flex;

   彈性盒和內聯彈性盒的區別，彈性盒高度會被子元素撐開，彈性盒寬度100%佔據整行。內聯彈性盒高度和寬度均由子元素寬高撐開，不會佔據整行。開發中一般用display:flex 。

二、主軸方向和是否允許換行

1. flex-direction

   搞清楚主軸和交叉軸的含義，不要用橫軸和豎軸描述這樣是不正確的。

   主軸方向：

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

   row 預設　→　　 row-reserve ←　　 column ↓　　 column-reverse ↑

2. flex-wrap

   是否換行:

   flex-wrap:no-wrap | wrap | wrap-reserve;

3. flex-flow

   flex-flow 屬性是 flex-direction 和 flex-wrap 的組合寫法

   flex-flow:row no-wrap;

三、排列布局

1. justify-content

   主軸方向的對齊方式

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

   flex-start容器開頭　　flex-end容器結尾　　center居中　　 space-around兩頭留白，中間留白　　space-between兩頭齊，中間留白

2. align-items

   交叉軸（與主軸垂直）的對齊方式，align-items對彈性盒的每一項單獨對齊。單行多行都能使用。

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

3. align-content

   當有多根主軸（使用wrap換行，即多行時）。align-content對彈性盒的所有元素看作一個整體使用。對單行是無效的，只適用於多行。不如align-items實用。

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

4. align-self

   對彈性盒中某一個子元素，在交叉軸進行單獨的對齊。

   align-self:flex-start | flex-end | center;

四、彈性盒中子項的尺寸

一個元素在彈性盒中的寬度由flex-basis、flex-grow、flex-shrink共同決定。

1. flex-basis

   規定了彈性盒中子元素在主軸方向的初始寬度，flex-basis比width有更高優先順序。預設auto，根據子元素的大小。

   與盒模型的關係：flex-basis只能在content-box上，對box-sizing:border-box是無效的。

2. flex-grow

   定義專案的放大比例，預設為0.

   如果存在剩餘空間（父元素大於子元素寬度之和），預設為0，不放大。剩餘空間均分為份數，flex-grow:1（若只分1份，剩餘空間全部給予），以此類推。

3. flex-shrink

   定義專案的縮小比例，預設為1（平均變小）

   如果剩餘空間不存在（父元素小於子元素寬度之和）若定義flex-shrink份數，縮小對應比例的空間。

4. flex:

   flex為三個屬性的縮寫， flex-grow, flex-shrink, flex-basis

   flex-grow: 可拉伸 預設0

   flex-shrink: 可壓縮 預設1

   flex-basis: 當前元素的寬度 預設auto

   flex:1 ---其實應寫成，flex-grow: 1; flex-shrink: 1; flex-basis: 0% (忽略自身寬度)

   flex:auto ---其實應寫成，flex-grow: 1; flex-shrink: 1; flex-basis: auto（元素自身寬度）

https://www.cnblogs.com/wanglei1900/p/16107029.html