容易忽視的flex屬性align-content
鄢棟：coder & game player。愛(ài)健身，愛(ài)自由， 自律得(二聲)自由。
背景
近期做項(xiàng)目，寫(xiě)頁(yè)面的 css 寫(xiě)的太多了，基本上都要用到 flex 布局， 而我所用到的 flex 布局中的屬性很有限， 基本只會(huì)用到flex-direction, justify-content, align-items這三個(gè)容器屬性， 最多涉及圖片被擠壓了， 使用一下子項(xiàng)的 flex-shrink: 0;來(lái)防止圖片被擠壓。
就當(dāng)我一邊聽(tīng)著音樂(lè)一邊沒(méi)有感情的敲打著justify-content: space-between;的時(shí)候, 我的腦袋瓜子好像有兩個(gè)小人在吵架：Jerry: 就不能用一下其他沒(méi)用過(guò)的 flex 屬性嗎！Tom: 又不是不能用！一把梭多快樂(lè)！Jerry: 朽木不可雕也！Tom: 朽木仍可灼！Jerry: ...
回過(guò)神來(lái)，Tom 貌似覺(jué)得 Jerry 說(shuō)的有些道理， 多個(gè)方式多條路， 實(shí)在不行寫(xiě)出來(lái)讓別人琢磨去（看不懂，<-_<-）。
flex 容器屬性之 align-content
關(guān)于 flex 的容器屬性、項(xiàng)目屬性這里就不在贅述了， 網(wǎng)上有很多講的很清楚的文章，推薦阮一峰-flex 布局巧了， Tom 就是看了阮老師的文章，看到 align-content 的時(shí)候， 它迷糊了。咋個(gè)意思？雖然畫(huà)圖了， 但是沒(méi)有實(shí)踐， 就等于看著健身視頻以為就能瘦是一樣的道理！
于是， Tom 開(kāi)始開(kāi)啟了學(xué)習(xí) align-content.
阮老師說(shuō)："align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。"
Tom 思考著, flex 布局有主軸和交叉軸， 也就是 flex 布局默認(rèn)的兩根軸。那怎么才算是定義了多根軸線呢？經(jīng)過(guò) Tom 反復(fù)實(shí)踐， 終于發(fā)現(xiàn)了規(guī)律， 原來(lái)需要顯式的定義一下布局方向， 比如：
<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;?/*必須定義某一個(gè)方向，?才會(huì)形成多根軸線*/
??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 不是要占滿容器的嗎， 為啥沒(méi)有效果！！看阮老師畫(huà)的圖也是充滿的呀， why is that so funny?!
文檔也沒(méi)有其他內(nèi)容說(shuō)明了！這時(shí)候， Tom 看了一眼 align-items 的值， 里面也有一個(gè) stretch, 這里阮老師說(shuō)：“如果項(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: 原來(lái)如此！只改了 item-1 和 item-3 的高度為 auto, 發(fā)現(xiàn)他們得到了延伸 stretch, 而其他沒(méi)有修改高度的子項(xiàng)還是沒(méi)有延伸。Tom 終于發(fā)現(xiàn)其中的奧秘了！！
Tom 又加以思索， 這個(gè)是設(shè)置了橫向的布局方向， 縱向的是什么表現(xiàn)？也來(lái)看一看。
縱向交叉軸：定義容器的布局方向flex-direction: column;
align-content: flex-start 效果
align-content: flex-end 效果
說(shuō)明設(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)過(guò)一番實(shí)戰(zhàn)后，Tom 可算找到規(guī)律了。對(duì)于容器屬性align-content， 要讓它生效的條件是：必須顯式的設(shè)置布局方向
如果布局方向?yàn)?strong style="color: rgba(0, 0, 0, 0.85);">橫向主軸：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)?strong style="color: rgba(0, 0, 0, 0.85);">縱向交叉軸：flex-direction: column;
1、此時(shí) align-content 的變化體現(xiàn)在水平方向 2、如果要讓 align-content: stretch；生效，這個(gè)時(shí)候應(yīng)該去掉子項(xiàng)的寬度或者設(shè)置子項(xiàng)的寬度為 auto
這次 Tom 見(jiàn)到 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!
