原文鏈接 : https://lz5z.com/FlexLayoutLearning/
什麼是 flex 佈局
傳統佈局的核心是盒子模型，依賴 display 屬性 + position 屬性 + float 屬性。可以看出來傳統佈局非常容易實現像 word 左對齊，右對齊這樣的功能，可以說，傳統佈局更適合於文字排版。
flex 是 flexible Box 的縮寫，可以看做彈性的盒子模型。
flex 用法
使用 flex 首先要設置父元素 display: flex。任何元素都可以指定爲 flex 佈局：
塊狀元素：
.box {
display: flex;
}
行內元素
.box {
display: inline-box;
}
設爲 flex 佈局以後，子元素的 float、clear 和 vertical-align 屬性將失效。
flex 兩個基本概念
flex 的核心的概念就是 容器 和 軸。容器包括外層的 父容器 和內層的 子容器，軸包括 主軸 和 交叉軸，如下圖所示：
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置叫做 main start，結束位置叫做 main end；交叉軸同理，子容器默認沿主軸排列。單個子容器佔據的主軸空間叫做 main size，佔據的交叉軸空間叫做 cross size。
容器具有這樣的特點：父容器可以統一設置子容器的排列方式，子容器也可以單獨設置自身的排列方式，如果兩者同時設置，以子容器的設置爲準。
父容器
父容器一共有6個屬性: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
flex-direction 屬性決定主軸的方向
flex-wrap 決定子容器是否換行排列
flex-flow
flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值爲 row nowrap
justify-content 設置子容器在主軸上的對齊方式
align-items 設置子容器沿交叉軸的對齊方式
子容器
子容器一共有6個屬性： order, flex-grow, flex-shrink, flex-basis, flex, align-self
order 改變子容器的排列順序
默認值爲 0，可以爲負值，數值越小排列越靠前。order 只能爲整數。
flex-grow 定義子容器如何瓜分剩餘空間
默認值爲 0，就是即使存在剩餘空間，也不瓜分。如果定義了非 0 值，則按照比例瓜分。flex-grow 只能爲整數。
flex-shrink 定義了子容器的縮小比例。
默認爲1，即如果空間不足，則子容器將縮小。如果所有子容器的 flex-shrink 都爲1，當空間不足時，都將等比例縮小。如果某個子容器的 flex-shrink 爲0，其他子容器都爲1，則空間不足時，前者不縮小。
flex-basis 用來改變子容器佔據主軸空間的大小
表示在不伸縮的情況下子容器佔據主軸空間的大小，默認爲 auto，表示子容器本來的大小。
flex
flex-grow, flex-shrink 和 flex-basis 的簡寫，默認值爲 0 1 auto
align-self 用來覆蓋父容器的 align-items 屬性
align-self 屬性允許單個子容器有與其他子容器不一樣的對齊方式，默認值爲auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch。改屬性的取值與 align-items 相同。