参见英文答案 > 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;
}
原文地址:https://www.jb51.cc/html/426278.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。