Flexbox 是 flexible box 的簡稱（注：意思是“靈活的盒子容器”），是 CSS3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的屏幕尺寸和設備下可預測地展現出來。
它之所以被稱為 Flexbox ，是因為它能夠擴展和收縮 flex 容器內的元素，以最大限度地填充可用空間。與以前布局方式（如 table 布局和浮動元素內嵌塊元素）相比，Flexbox 是一個更強大的方式：
- 在不同方向排列元素
- 重新排列元素的顯示順序
- 更改元素的對齊方式
- 動態地將元素裝入容器
一、基本概念
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
在 Flexbox 模型中，有三個核心概念：
– flex 項（注：也稱 flex 子元素），需要布局的元素
– flex 容器，其包含 flex 項
– 排列方向（direction），這決定了 flex 項的布局方向
二、容器屬性
2.1 flex-direction:
- row（默認值）：主軸為水平方向，起點在左端。
- row-reverse：主軸為水平方向，起點在右端。
- column：主軸為垂直方向，起點在上沿。
- column-reverse：主軸為垂直方向，起點在下沿。
2.2 flex-wrap:
- nowrap（默認）：不換行。
- wrap：換行，第一行在上方。
- wrap-reverse：換行，第一行在下方。
2.3 justify-content:
- flex-start（默認值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊，項目之間的間隔都相等。
- space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
2.4 align-items:
- flex-start：交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊。
- center：交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊。
- stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
2.5 align-content:
定義了多根軸線的對齊方式，如果項目只有一根軸線，那么該屬性將不起作用
- flex-start：與交叉軸的起點對齊。
- flex-end：與交叉軸的終點對齊。
- center：與交叉軸的中點對齊。
- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
- space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（默認值）：軸線占滿整個交叉軸。
結合 justify-content和align-items，看看在 flex-direction 兩個不同屬性值的作用下，軸心有什么不同：
三、項目屬性
彈性布局默認不改變項目的寬度，但是它默認改變項目的高度。如果項目沒有顯式指定高度，就將占據容器的所有高度。
參考：http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html