迅速搞定Flex佈局

Flex佈局概念

flex其實很是簡單好用。在小程序、webapp、混合app上，官方都是推薦使用flex來實現自適應的佈局。

採用Flex佈局的元素，稱爲Flex容器container。它的全部子元素自動成爲容器成員，稱爲Flex項目item。

容器中默認存在兩條軸，主軸(main axis) 和交叉軸(cross axis)。項目默認沿主軸排列。單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size。

主軸、交叉軸並不能簡單粗暴地理解爲橫軸豎軸，由於它們位置能夠置換。同理若是水平方向是主軸，那麼main size 是寬；若是垂直方向是主軸，那麼main size 是高

任何容器都能指定Flex佈局

flex 在線預覽

.box{    
    display: flex; /* 行內元素: display: inline-flex; */   
    display: -webkit-flex; /* Safari Webkit內核的瀏覽器，必須加上-webkit前綴。 */  
} 
複製代碼

這裏要注意：設置了 flex 佈局以後，子元素的 float、clear、vertical-align 的屬性將失效。

容器的6個屬性

flex-direction 決定主軸的方向(即項目的排列方向)

flex-direction 在線預覽

.container {   
   flex-direction: row | row-reverse | column | column-reverse;  
} 
複製代碼

選項	表現
row（默認） 主軸爲水平方向，起點在左側
row-reverse 主軸爲水平方向，起點在右側
column 主軸爲垂直方向，起點在上方
column-reverse 主軸爲垂直方向，起點在下方

flex-wrap 決定容器內項目是否可換行

flex-wrap 在線預覽

.container {  
 flex-wrap: nowrap | wrap | wrap-reverse;
}  
複製代碼

選項	表現
nowrap（默認） 不換行
wrap 項目總尺寸超過主軸尺寸時換行，第一行在上方
wrap-reverse 換行，第一行在下方

flex-flow: flex-direction 和 flex-wrap 集合

.container {
    flex-flow: <flex-direction> <flex-wrap>;
}
複製代碼

默認值爲: flex-direction:row; flex-wrap:nowrap;，

justify-content：指定主軸方向項目的對齊方式

flex-wrap 在線預覽

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}
複製代碼

主軸爲水平方向時，表現以下：

選項	表現
flex-start(默認) 主軸方向起點對齊
flex-end 主軸方向終點對齊
center 主軸方向居中對齊
space-between 左右先對齊，項目間隔平分剩下距離
space-around 項目兩側間隔相等，項目間隔是項目與邊緣的間隔的兩倍

align-items: 指定交叉軸上項目的對齊方式

align-items 在線預覽

主軸爲水平方向時，表現以下：

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}
複製代碼

主軸爲水平方向時，表現以下：

選項	表現
stretch(默認) 若是項目未設置高度或者設爲 auto，將佔滿整個容器的高度
flex-start 交叉軸方向起點對齊
flex-end 交叉軸方向起點對齊
center 交叉軸方向居中對齊
baseline 第一個項目文字基線對齊(文字底部)

align-content: 多根軸線指定對齊方式

align-items 在線預覽

若是項目只有一根軸線flex-wrap: nowrap，該屬性將不起做用

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
} 
複製代碼

主軸爲水平方向時flex-direction: row, flex-wrap: wrap，表現以下：

選項	表現
stretch(默認)： 若是項目未設置高度或者設爲 auto，將佔滿整個容器的高度,軸線平分容器的垂直方向上的空間
flex-start：軸線在交叉軸方向起點對齊
flex-end：軸線在交叉軸方向終點對齊
center：軸線在交叉軸方向居中對齊
space-between：軸線兩端對齊，間隔平分垂直空間
space-around：軸線兩側間隔相等，軸線間隔是軸線與邊緣的間隔的兩倍

項目的屬性

order: 定義項目在容器中的排列順序數值越小，排列越靠前，默認值爲 0

order 在線預覽

.item {
    order: <integer>;
}
複製代碼

flex-grow 指定項目放大比例默認爲0，即若是存在剩餘空間，也不放大

flex-grow 在線預覽

.item {
  flex-grow: <number>; /* default 0 */
}
複製代碼

存在剩餘空間時表現以下：

選項	表現
全部項目的flex-grow屬性都爲1，項目將平分剩餘空間
有一個項目的flex-grow屬性爲4，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多4倍

flex-shrink 指定項目縮小比例默認爲1，即若是空間不足，該項目將縮小

flex-shrink 在線預覽

.item {
  flex-shrink: <number>; /* default 1 負值對該屬性無效 */
}
複製代碼

。若是。

存在空間不足時表現以下：

選項	表現
全部項目的flex-shrink屬性都爲1，都將等比例縮小
有一個項目的flex-shrink屬性爲0，其餘項目都爲1，前者不縮小

flex-basis: 在分配多餘空間前，指定項目佔據的主軸空間瀏覽器根據這個屬性，計算主軸是否有多餘空間,默認值爲auto，即項目的原本大小

flex-basis 在線預覽

.item {
    flex-basis: <length> | auto; /* default auto */
}
複製代碼

• 主軸爲水平方向的時候，flex-basis的值會讓項目的寬度設置失效
• flex-basis 須要配合 flex-grow 和 flex-shrink 使用,但flex-grow 和 flex-shrink只有一個會起做用(不可能既放大又縮小)
• 它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。

翻譯過來就是：當存在剩餘空間下，優先分配flex-basis不爲auto的項目後，再分配剩餘空間
如圖中項目3flex-basis：200px;,其餘flex-basis：auto;

align-self: 指定項目和其餘項目不同的對齊方式

align-self 在線預覽

.item {
   align-self: auto | flex-start | flex-end | center | baseline | stretch; /* default auto */
}
複製代碼

單個項目定義的屬性，表示繼承父元素align-items屬性，若是沒有父元素，則等同於 stretch。
如 項目1是align-items:flex-end，其餘都是align-items:flex-start