2017年總結的前端文章——一勞永逸的搞定 flex 布局
flex 基本概念
使用 flex 布局首先要設置父容器 display: flex，然後再設置 justify-content: center 實現水平居中，最後設置 align-items: center 實現垂直居中。
<div class="box"> <div class="dad"> </div> </div>
CSS：
.box{ width: 400px;height: 400px;border: 1px solid saddlebrown; display: flex; justify-content: center; align-items: center; background: #363737; } .dad{ width: 100px;height: 100px;background: green; }
是的，flex 的確沒有那麽簡單，這就要從兩個基本概念說起了。
display: flex），其中父容器、子容器各 6 個。不過常用的屬性只有 4 個，父容器、子容器各 2 個，我們就先從常用的說起吧。
1. 容器
容器具有這樣的特點：父容器可以統一設置子容器的排列方式，子容器也可以單獨設置自身的排列方式，如果兩者同時設置，以子容器的設置為準。
1.1 父容器
設置子容器沿主軸排列：justify-content
justify-content 屬性用於定義如何沿著主軸方向排列子容器。
flex-start：起始端對齊
flex-end：末尾段對齊
center：居中對齊
space-around：子容器沿主軸均勻分布，位於首尾兩端的子容器到父容器的距離是子容器間距的一半。
space-between：子容器沿主軸均勻分布，位於首尾兩端的子容器與父容器相切。
設置子容器如何沿交叉軸排列：align-items
align-items 屬性用於定義如何沿著交叉軸方向分配子容器的間距。
flex-start：起始端對齊
flex-end：末尾段對齊
center：居中對齊
baseline：基線對齊，這裏的 baseline 默認是指首行文字，即 first baseline，所有子容器向基線對齊，交叉軸起點到元素基線距離最大的子容器將會與交叉軸起始端相切以確定基線
stretch：子容器沿交叉軸方向的尺寸拉伸至與父容器一致。
1.2 子容器
單獨設置子容器如何沿交叉軸排列：align-self
每個子容器也可以單獨定義沿交叉軸排列的方式，此屬性的可選值與父容器 align-items 屬性完全一致，如果兩者同時設置則以子容器的 align-self 屬性為準。
flex-start：起始端對齊
flex-end：末尾段對齊
center：居中對齊
2. 軸
如圖所示，軸 包括 主軸 和 交叉軸，我們知道justify-content 屬性決定子容器沿主軸的排列方式，align-items 屬性決定子容器沿著交叉軸的排列方式。那麽軸本身又是怎樣確定的呢？在 flex 布局中，flex-direction 屬性決定主軸的方向，交叉軸的方向由主軸確定。
主軸
主軸的起始端由 flex-start 表示，末尾段由 flex-end 表示。不同的主軸方向對應的起始端、末尾段的位置也不相同。
向右：flex-direction: row
向下：flex-direction: column
向左：flex-direction: row-reverse
向上：flex-direction: column-reverse
交叉軸
主軸沿逆時針方向旋轉 90° 就得到了交叉軸，交叉軸的起始端和末尾段也由 flex-start 和 flex-end 表示。
上面介紹的幾項屬性是 flex 布局中最常用到的部分，一般來說可以滿足大多數需求，如果實現復雜的布局還需要深入了解更多的屬性。
flex 進階概念
1. 父容器
設置換行方式：flex-wrap
決定子容器是否換行排列，不但可以順序換行而且支持逆序換行。
nowrap：不換行
wrap：換行
wrap-reverse：逆序換行
以上就是 flex 布局的全部屬性，一共 12 個，父容器、子容器各 6 個，可以隨時通過下圖進行回顧。
2017年總結的前端文章——一勞永逸的搞定 flex 布局