参见英文答案 > Remove space (gaps) between multiple lines of flex items when they wrap 1个
> How does flex-wrap work with align-self,align-items and align-content? 2个
这是我的示例代码：
#parent {
display: flex;
height: 350px;
background: yellow;
}
#wrapper {
flex: 1;
display: flex;
flex-flow: row wrap;
margin: 0 10%;
background: #999;
}
#top {
flex: 1 100%;
height: 50px;
margin-top: 10px;
background: red;
}
#left {
width: 30%;
height: 150px;
margin: 10px 10px 0 0;
background: blue;
}
#right {
flex: 1;
margin: 10px 0 0 0;
background: green;
}
如您所见,顶部(红色)和左/右(蓝色/绿色)之间存在间隙(大灰色区域). FlexBox似乎在父元素(灰色)中均匀地传播所有内容.
但是,我不希望我的元素之间存在差距,我需要一切都“上升”到顶部.所有元素(最后)之后可能存在差距.
我尝试了所有我能找到/想到的东西：自动边距,对齐内容,对齐项目等.没有预期的效果.
怎么做到这一点？
最佳答案
您需要在flex-container或您的#wrapper元素中添加align-content: flex-start.
#parent {
display: flex;
height: 350px;
background: yellow;
}
#wrapper {
flex: 1;
display: flex;
flex-flow: row wrap;
margin: 0 10% 50px 10%;
background: #999;
align-content: flex-start; /* Add this*/
}
#top {
flex: 1 100%;
height: 50px;
margin-top: 10px;
background: red;
}
#left {
width: 30%;
height: 150px;
margin: 10px 10px 0 0;
background: blue;
}
#right {
flex: 1;
margin: 10px 0 0 0;
background: green;
}
