容易忽視的Flex屬性Align-Content
本文轉載自微信公眾號「微醫大前端技術」，作者鄢棟。轉載本文請聯系微醫大前端技術公眾號。
背景
近期做項目，寫頁面的 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
關于 flex 的容器屬性、項目屬性這里就不在贅述了， 網上有很多講的很清楚的文章，推薦阮一峰-flex 布局巧了， Tom 就是看了阮老師的文章，看到 align-content 的時候， 它迷糊了。咋個意思?雖然畫圖了， 但是沒有實踐， 就等于看著健身視頻以為就能瘦是一樣的道理!
于是， Tom 開始開啟了學習 align-content.
阮老師說："align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。"
Tom 思考著, flex 布局有主軸和交叉軸， 也就是 flex 布局默認的兩根軸。那怎么才算是定義了多根軸線呢?經過 Tom 反復實踐， 終于發現了規律， 原來需要顯示的定義一下布局方向， 比如：
- <div class="flex-container">
- <div class="flex-item flex-item-1">1</div>
- <div class="flex-item flex-item-1">1</div>
- <div class="flex-item flex-item-2">2</div>
- <div class="flex-item flex-item-2">2</div>
- <div class="flex-item flex-item-3">3</div>
- <div class="flex-item flex-item-3">3</div>
- <div class="flex-item flex-item-4">4</div>
- <div class="flex-item flex-item-4">4</div>
- <div class="flex-item flex-item-5">5</div>
- <div class="flex-item flex-item-5">5</div>
- </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 不是要占滿容器的嗎， 為啥沒有效果!!看阮老師畫的圖也是充滿的呀， why is that so funny?! 文檔也沒有其他內容說明了!這時候， Tom 看了一眼 align-items 的值， 里面也有一個 stretch, 這里阮老師說：“如果項目未設置高度或設為 auto，將占滿整個容器的高度。” Tom: align-content 的 stretch 屬性跟這里應該是一個意思， 驗證一下!Tom 回去看了一下子項目的 css, 發現每個項目都設置了高度， 把這些高度去掉或者改為 auto 試一下：
子項目高度改為 auto 時，align-content: stretch 效果
Tom: 原來如此!只改了 item-1 和 item-3 的高度為 auto, 發現他們得到了延伸 stretch, 而其他沒有修改高度的子項還是沒有延伸。Tom 終于發現其中的奧秘了!!
Tom 又加以思索， 這個是設置了橫向的布局方向， 縱向的是什么表現?也來看一看。
縱向交叉軸：定義容器的布局方向flex-direction: column;
align-content: flex-start 效果
align-content: flex-end 效果
說明設置布局方向為 column 的時候， align-content 表現體現在水平方向上?如果是 center, 那就是水平居中了?試試!!
align-content: center 效果
align-content: space-around 效果
align-content: space-between 效果
align-content: stretch 效果
總結
經過一番實戰后，Tom 可算找到規律了。對于容器屬性align-content， 要讓它生效的條件是：必須顯式的設置布局方向
如果布局方向為橫向主軸：flex-direction: row;
1、此時 align-content 的變化體現在豎直方向
2、如果要讓 align-content: stretch;生效，這個時候應該去掉子項的高度或者設置子項的高度為 auto
如果布局方向為縱向交叉軸：flex-direction: column;
1、此時 align-content 的變化體現在水平方向
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!
