flex是flexible box的縮寫，意味彈性布局
設為flex布局後，子元素的float、clear和vertical-align屬性將消失
.box
排列方向
row：預設沿水平方向讓元素從左到右排列
row-reverse： 沿水平方向從右到左排列
column： 沿垂直方向從上到下排列
column-reverse：沿垂直方向從下到上排列
1.2 flex-wrap：nowrap | wrap | wrap-reverse
如何換行
nowrap：預設元素不換行，自動減少寬度
wrap：元素換行， 第一行在上方
wrap-reverse：元素換行， 第一行在下方
1.3 flex-flow：flex-direction屬性和flex-wrap屬性的簡寫形式
row nowrap：預設 從左到右不換行
1.4 justify-content：flex-start | flex-end | center | space-between | space-around
水平方向上如何對齊
flext-start：預設在水平方向上居左對齊
flext-end：在水平方向上居右對齊
center：在水平方向上居中對齊
space-between 兩端開始排列，空格均勻分布
space-around 每個元素兩側的間隔相等。所以元素之間的間隔比元素與邊框之間的間隔大一倍
1.5 align-items：stretch | flex-start | flex-end | center | baseline
垂直水平上如何對齊
stretch：預設如果專案未設定高度或設為auto，佔滿整個容器的高度
flext-start：在垂直水平上居上對齊
flext-end：在垂直水平上居下對齊
center：在垂直水平上居中對齊
baseline：專案的第一行文字的基線對齊
1.6 align-content：stretch| flex-start | flex-end | center | space-between | space-around
多行如何分布
stretch：佔滿整個垂直主軸
flext-start：在垂直水平上居上排列
flext-end：在垂直水平上居下排列
center：在垂直水平上居中排列
space-between 兩端開始排列，空格均勻分布
space-around 每個元素兩側的間隔相等。所以元素之間的間隔比元素與邊框之間的間隔大一倍
2.1 order： 0
屬性定義專案的排列順序。數值越小，排列越靠前，預設為0
2.2 flex-grow：0
屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大
如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）
如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍
2.3 flex-shrink：1
屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小
如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小
負值對該屬性無效
2.4 flex-basis：auto
屬性定義了在分配多餘空間之前，專案佔據的空間
瀏覽器根據這個屬性，計算主軸是否有多餘空間
預設值為auto，即專案的本來大小
可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間
2.5 flex：0 1 auto
flex-grow, flex-shrink 和 flex-basis的簡寫
後兩個屬性可選
有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)
2.6 align-self：auto
允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性
參考：
css 彈性布局
什麼是彈性布局？flex布局，是h5新出的布局方式，主要代替傳統float浮動布局。注意 布局要給父元素設定，子元素按照布局方式排列，他會使塊級元素不獨佔一行。特點 當沒有給彈性布局設定換行時，子元素不會自動換行會在一行顯示。display flex 設定彈性布局 flex direction 設定...
CSS 彈性布局
box box box 基本概念 row 預設值 主軸為水平方向，起點在左端。row reverse 主軸為水平方向，起點在右端。column 主軸為垂直方向，起點在上沿。column reverse 主軸為垂直方向，起點在下沿。nowrap 預設 不換行 wrap 換行，第一行在上方 wrap r...
Css 彈性布局
彈性布局 display flex 要發生彈性布局的子元素，他們的父元素，成為容器需設定display flex flex將塊級元素設定為容器 inline flex將行內元素設定為容器 元素設定為flex容器後，容器的text align，vertical align失效設定主軸的方向 flex ...