一切都始於這樣乙個問題：怎樣通過 css 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 css 的時候，看到float屬性不由得感覺眼前一亮，順理成章的聯想到 word 文件排版中用到的的左對齊、右對齊和居中對齊，然而很快就失望的發現 css 中並不存在float: center的寫法，那麼text-align: center、verticle-align: center是否可行呢？答案也是否定的。這兩個屬性只能用於行內元素，對於塊級元素的布局是無效的。
在網頁布局沒有進入 css 的時代，排版幾乎是通過table元素實現的，在table的單元格裡可以方便的使用align、valign來實現水平和垂直方向的對齊，隨著 web 語義化的流行，這些寫法逐漸淡出了視野，css 標準為我們提供了 3 種布局方式：標準文件流、浮動布局和定位布局。這幾種方式的搭配使用可以輕鬆搞定 pc 端頁面的常見需求，比如實現水平居中可以使用margin: 0 auto，實現水平垂直同時居中可以如下設定：
.dad 複製**.son 複製**.dad 複製**.son 複製**使用 flex 布局首先要設定父容器display: flex，然後再設定justify-content: center實現水平居中，最後設定align-items: center實現垂直居中。
#dad 複製**就是這麼簡單，大功告成。等等，好像**不對，justify-content和align-items是啥？**可以看出橫向、豎向的語義？是的，flex 的確沒有那麼簡單，這就要從兩個基本概念說起了。
說來也不難，flex 的核心的概念就是容器和軸。容器包括外層的父容器和內層的子容器，軸包括主軸和交叉軸，可以說 flex 布局的全部特性都構建在這兩個概念上。flex 布局涉及到 12 個 css 屬性（不含display: flex），其中父容器、子容器各 6 個。不過常用的屬性只有 4 個，父容器、子容器各 2 個，我們就先從常用的說起吧。
容器具有這樣的特點：父容器可以統一設定子容器的排列方式，子容器也可以單獨設定自身的排列方式，如果兩者同時設定，以子容器的設定為準。
1.1 父容器
justify-content屬性用於定義如何沿著主軸方向排列子容器。
flex-start：起始端對齊
flex-end：末尾段對齊
center：居中對齊
space-around：子容器沿主軸均勻分布，位於首尾兩端的子容器到父容器的距離是子容器間距的一半。
space-between：子容器沿主軸均勻分布，位於首尾兩端的子容器與父容器相切。
flex-start：起始端對齊
flex-end：末尾段對齊
center：居中對齊
baseline：基線對齊，這裡的baseline預設是指首行文字，即first baseline，所有子容器向基線對齊，交叉軸起點到元素基線距離最大的子容器將會與交叉軸起始端相切以確定基線。
stretch：子容器沿交叉軸方向的尺寸拉伸至與父容器一致。
1.2 子容器
子容器是有彈性的（flex 即彈性），它們會自動填充剩餘空間，子容器的伸縮比例由flex屬性確定。
flex的值可以是無單位數字（如：1, 2, 3），也可以是有單位數字（如：15px，30px，60px），還可以是none關鍵字。子容器會按照flex定義的尺寸比例自動伸縮，如果取值為none則不伸縮。
雖然flex是多個屬性的縮寫，允許 1 - 3 個值連用，但通常用 1 個值就可以滿足需求，它的全部寫法可參考下圖。
每個子容器也可以單獨定義沿交叉軸排列的方式，此屬性的可選值與父容器align-items屬性完全一致，如果兩者同時設定則以子容器的align-self屬性為準。
flex-start：起始端對齊
flex-end：末尾段對齊
center：居中對齊
baseline：基線對齊
stretch：拉伸對齊
如圖所示，軸包括主軸和交叉軸，我們知道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
nowrap：不換行
wrap：換行
wrap-reverse：逆序換行逆序換行是指沿著交叉軸的反方向換行。
多行沿交叉軸對齊：align-content
當子容器多行排列時，設定行與行之間的對齊方式。
flex-start：起始端對齊
flex-end：末尾段對齊
center：居中對齊
space-around：等邊距均勻分布
space-between：等間距均勻分布
stretch：拉伸對齊
以上就是 flex 布局的全部屬性，一共 12 個，父容器、子容器各 6 個，可以隨時通過下圖進行回顧。
程式設計行業如何一勞永逸
作者用富爸爸的一句話回答 真正的有錢是指，當你全家人在完全不工作的情況下，你還可以維持以前的生活水平多久。怎麼理解富爸爸這句話呢？比如你有20萬，而你乙個月固定開支是2萬，那麼你的財富就是10個月。也就是財富是用時間來衡量的，而不是金錢。那我今天談談，在程式設計行業，如何一勞永逸。通常做經程式設計的...
程式設計行業如何一勞永逸
作者用富爸爸的一句話回答 真正的有錢是指，當你全家人在完全不工作的情況下，你還可以維持以前的生活水平多久。怎麼理解富爸爸這句話呢？比如你有20萬，而你乙個月固定開支是2萬，那麼你的財富就是10個月。也就是財富是用時間來衡量的，而不是金錢。那我今天談談，在程式設計行業，如何一勞永逸。通常做經程式設計的...
VUE一勞永逸的元件註冊
我們寫了一堆基礎ui元件，然後每次我們需要使用這些元件的時候，都得先import，然後宣告components，很繁瑣！秉持能偷懶就偷懶的原則，我們要想辦法優化！招式解析 我們需要借助一下神器webpack，使用 require.context 方法來建立自己的 模組 上下文，從而實現自動動態req...