在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ flex布局換行元素產(chǎn)生的間隙問(wèn)題？

flex布局換行元素產(chǎn)生的間隙問(wèn)題？

在使用flex布局的時(shí)候，發(fā)現(xiàn)換行的元素不會(huì)緊貼著上一排元素，而是產(chǎn)生了一定的間隙：
圖片描述

灰色部分是多出來(lái)的地方，這是當(dāng)前頁(yè)面的代碼：

.container{
    display: flex;
    flex-flow: row wrap;
    background: rgb(185, 185, 185);
    height: 10em;       
}
.item{
    flex: 1 20%;
    height: 3em;
    background: rgb(156, 252, 255);
}
.item:nth-child(2n) {
    background: #79afec;
}
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>

好像是flex布局自動(dòng)上下平分了空間，請(qǐng)問(wèn)有沒(méi)有辦法在保證容器和元素高度的情況下讓換行的元素緊貼著上一行呢？

回答
編輯回答
替身

從根本解決問(wèn)題：

align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用

取值情況：
flex-start：與交叉軸的起點(diǎn)對(duì)齊。
flex-end：與交叉軸的終點(diǎn)對(duì)齊。
center：與交叉軸的中點(diǎn)對(duì)齊。
stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。
space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

對(duì)應(yīng)的效果圖：

clipboard.png

2018年5月14日 17:43
編輯回答
氕氘氚

在大容器上寫上
align-content: flex-start
即可;

2017年9月19日 06:09
編輯回答
舊言
.container{
    display: flex;
    flex-flow: row wrap;
    background: rgb(185, 185, 185);
    height: 10em;  
    align-content: flex-start;     
}
2018年3月22日 06:44