容易忽視的Flex屬性Align-Content
本文轉(zhuǎn)載自微信公眾號「微醫(yī)大前端技術(shù)」，作者鄢棟。轉(zhuǎn)載本文請聯(lián)系微醫(yī)大前端技術(shù)公眾號。
背景
近期做項(xiàng)目，寫頁面的 css 寫的太多了，基本上都要用到 flex 布局， 而我所用到的 flex 布局中的屬性很有限， 基本只會用到flex-direction, justify-content, align-items這三個(gè)容器屬性， 最多涉及圖片被擠壓了， 使用一下子項(xiàng)的 flex-shrink: 0;來防止圖片被擠壓。
就當(dāng)我一邊聽著音樂一邊沒有感情的敲打著justify-content: space-between;的時(shí)候, 我的腦袋瓜子好像有兩個(gè)小人在吵架：Jerry: 就不能用一下其他沒用過的 flex 屬性嗎!Tom: 又不是不能用!一把梭多快樂!Jerry: 朽木不可雕也!Tom: 朽木仍可灼!Jerry: ...
回過神來，Tom 貌似覺得 Jerry 說的有些道理， 多個(gè)方式多條路， 實(shí)在不行寫出來讓別人琢磨去(看不懂，<-_<-)。
flex 容器屬性之 align-content
關(guān)于 flex 的容器屬性、項(xiàng)目屬性這里就不在贅述了， 網(wǎng)上有很多講的很清楚的文章，推薦阮一峰-flex 布局巧了， Tom 就是看了阮老師的文章，看到 align-content 的時(shí)候， 它迷糊了。咋個(gè)意思?雖然畫圖了， 但是沒有實(shí)踐， 就等于看著健身視頻以為就能瘦是一樣的道理!
于是， Tom 開始開啟了學(xué)習(xí) align-content.
阮老師說："align-content屬性定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。"
Tom 思考著, flex 布局有主軸和交叉軸， 也就是 flex 布局默認(rèn)的兩根軸。那怎么才算是定義了多根軸線呢?經(jīng)過 Tom 反復(fù)實(shí)踐， 終于發(fā)現(xiàn)了規(guī)律， 原來需要顯示的定義一下布局方向， 比如：
- <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; /*必須定義某一個(gè)方向， 才會形成多根軸線*/
- align-content: flex-end;/*更改 align-content 的值，體驗(yàn)不同的效果*/
- 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?! 文檔也沒有其他內(nèi)容說明了!這時(shí)候， Tom 看了一眼 align-items 的值， 里面也有一個(gè) stretch, 這里阮老師說：“如果項(xiàng)目未設(shè)置高度或設(shè)為 auto，將占滿整個(gè)容器的高度。” Tom: align-content 的 stretch 屬性跟這里應(yīng)該是一個(gè)意思， 驗(yàn)證一下!Tom 回去看了一下子項(xiàng)目的 css, 發(fā)現(xiàn)每個(gè)項(xiàng)目都設(shè)置了高度， 把這些高度去掉或者改為 auto 試一下：
子項(xiàng)目高度改為 auto 時(shí)，align-content: stretch 效果
Tom: 原來如此!只改了 item-1 和 item-3 的高度為 auto, 發(fā)現(xiàn)他們得到了延伸 stretch, 而其他沒有修改高度的子項(xiàng)還是沒有延伸。Tom 終于發(fā)現(xiàn)其中的奧秘了!!
Tom 又加以思索， 這個(gè)是設(shè)置了橫向的布局方向， 縱向的是什么表現(xiàn)?也來看一看。
縱向交叉軸：定義容器的布局方向flex-direction: column;
align-content: flex-start 效果
align-content: flex-end 效果
說明設(shè)置布局方向?yàn)?column 的時(shí)候， align-content 表現(xiàn)體現(xiàn)在水平方向上?如果是 center, 那就是水平居中了?試試!!
align-content: center 效果
align-content: space-around 效果
align-content: space-between 效果
align-content: stretch 效果
總結(jié)
經(jīng)過一番實(shí)戰(zhàn)后，Tom 可算找到規(guī)律了。對于容器屬性align-content， 要讓它生效的條件是：必須顯式的設(shè)置布局方向
如果布局方向?yàn)闄M向主軸：flex-direction: row;
1、此時(shí) align-content 的變化體現(xiàn)在豎直方向
2、如果要讓 align-content: stretch;生效，這個(gè)時(shí)候應(yīng)該去掉子項(xiàng)的高度或者設(shè)置子項(xiàng)的高度為 auto
如果布局方向?yàn)榭v向交叉軸：flex-direction: column;
1、此時(shí) align-content 的變化體現(xiàn)在水平方向
2、如果要讓 align-content: stretch;生效，這個(gè)時(shí)候應(yīng)該去掉子項(xiàng)的寬度或者設(shè)置子項(xiàng)的寬度為 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!
