容易忽視的flex屬性align-content
鄢棟：coder & game player。愛健身，愛自由， 自律得(二聲)自由。
背景
近期做項目，寫頁面的 css 寫的太多了，基本上都要用到 flex 布局， 而我所用到的 flex 布局中的屬性很有限， 基本只會用到flex-direction, justify-content, align-items這三個容器屬性， 最多涉及圖片被擠壓了， 使用一下子項的 flex-shrink: 0;來防止圖片被擠壓。
就當我一邊聽著音樂一邊沒有感情的敲打著justify-content: space-between;的時候, 我的腦袋瓜子好像有兩個小人在吵架：Jerry: 就不能用一下其他沒用過的 flex 屬性嗎！Tom: 又不是不能用！一把梭多快樂！Jerry: 朽木不可雕也！Tom: 朽木仍可灼！Jerry: ...
回過神來，Tom 貌似覺得 Jerry 說的有些道理， 多個方式多條路， 實在不行寫出來讓別人琢磨去（看不懂，<-_<-）。
flex 容器屬性之 align-content
關(guān)于 flex 的容器屬性、項目屬性這里就不在贅述了， 網(wǎng)上有很多講的很清楚的文章，推薦阮一峰-flex 布局巧了， Tom 就是看了阮老師的文章，看到 align-content 的時候， 它迷糊了。咋個意思？雖然畫圖了， 但是沒有實踐， 就等于看著健身視頻以為就能瘦是一樣的道理！
于是， Tom 開始開啟了學習 align-content.
阮老師說："align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。"
Tom 思考著, flex 布局有主軸和交叉軸， 也就是 flex 布局默認的兩根軸。那怎么才算是定義了多根軸線呢？經(jīng)過 Tom 反復實踐， 終于發(fā)現(xiàn)了規(guī)律， 原來需要顯式的定義一下布局方向， 比如：
<div?class="flex-container">
??<div?class="flex-item?flex-item-1">1div>
??<div?class="flex-item?flex-item-1">1div>
??<div?class="flex-item?flex-item-2">2div>
??<div?class="flex-item?flex-item-2">2div>
??<div?class="flex-item?flex-item-3">3div>
??<div?class="flex-item?flex-item-3">3div>
??<div?class="flex-item?flex-item-4">4div>
??<div?class="flex-item?flex-item-4">4div>
??<div?class="flex-item?flex-item-5">5div>
??<div?class="flex-item?flex-item-5">5div>
div>
##橫向主軸：定義容器的布局方向flex-direction: row;
.flex-container?{
??height:?400px;
??display:?flex;
??flex-flow:?row?wrap;?/*必須定義某一個方向，?才會形成多根軸線*/
??align-content:?flex-end;/*更改?align-content?的值，體驗不同的效果*/
??background:?gray;
}
.flex-item?{
??white-space:?nowrap;
??margin-right:?10px;
??margin-bottom:?10px;
??text-align:?end;
}
.flex-item-1,?.flex-item-3?{
??width:?60px;
??height:?80px;
??background:?lightcoral;
}
.flex-item-2,?.flex-item-4?{
??width:?90px;
??height:?40px;
??background:?lightblue;
}
.flex-item-5?{
??width:?105px;
??height:?20px;
??background:?lightgreen;
}
align-content: flex-start 效果
align-content: flex-end 效果
align-content: center 效果
align-content: space-around 效果
align-content: space-between 效果
align-content: stretch 效果
Tom：WTF?!
stretch 不是要占滿容器的嗎， 為啥沒有效果?。】慈罾蠋煯嫷膱D也是充滿的呀， why is that so funny?!
文檔也沒有其他內(nèi)容說明了！這時候， Tom 看了一眼 align-items 的值， 里面也有一個 stretch, 這里阮老師說：“如果項目未設置高度或設為 auto，將占滿整個容器的高度?！?Tom: align-content 的 stretch 屬性跟這里應該是一個意思， 驗證一下！Tom 回去看了一下子項目的 css, 發(fā)現(xiàn)每個項目都設置了高度， 把這些高度去掉或者改為 auto 試一下：
子項目高度改為 auto 時，align-content: stretch 效果
Tom: 原來如此！只改了 item-1 和 item-3 的高度為 auto, 發(fā)現(xiàn)他們得到了延伸 stretch, 而其他沒有修改高度的子項還是沒有延伸。Tom 終于發(fā)現(xiàn)其中的奧秘了??！
Tom 又加以思索， 這個是設置了橫向的布局方向， 縱向的是什么表現(xiàn)？也來看一看。
縱向交叉軸：定義容器的布局方向flex-direction: column;
align-content: flex-start 效果
align-content: flex-end 效果
說明設置布局方向為 column 的時候， align-content 表現(xiàn)體現(xiàn)在水平方向上？如果是 center, 那就是水平居中了？試試?。?/p>
align-content: center 效果
align-content: space-around 效果
align-content: space-between 效果
align-content: stretch 效果
總結(jié)
經(jīng)過一番實戰(zhàn)后，Tom 可算找到規(guī)律了。對于容器屬性align-content， 要讓它生效的條件是：必須顯式的設置布局方向
如果布局方向為橫向主軸：flex-direction: row;
1、此時 align-content 的變化體現(xiàn)在豎直方向 2、如果要讓 align-content: stretch；生效，這個時候應該去掉子項的高度或者設置子項的高度為 auto 如果布局方向為縱向交叉軸：flex-direction: column;
1、此時 align-content 的變化體現(xiàn)在水平方向 2、如果要讓 align-content: stretch；生效，這個時候應該去掉子項的寬度或者設置子項的寬度為 auto
這次 Tom 見到 Jerry 了Tom: Hey！Jerry, I've learned a new property of flex, align-content, you can look it up in my blog.Jerry: oh, I see! that's awesome! keep it on, find more intereting properties of flex.Tom: Good idea! I'll do it next time! thank you!Jerry: My pleasure!
