页边距-仅当flex项目被换行时才在顶部
页边距-仅当flex项目被换行时才在顶部
提问于 2015-06-17 17:07:57
我有一个带有两个flex项的flex容器。我想在第二行上设置一个页边距-顶部，但仅当它被包装时，而不是在第一条弹性线处。
如果可能，我希望避免使用媒体查询。
我认为第一个元素的边际底部可能是一个解决方案。然而，当元素没有被包装时，它会在底部增加空间，所以同样的问题。
这是我的代码：
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item-big {
background: blue;
width: 300px;
}
.item-small {
background: red;
margin-top: 30px;
}<div class="container">
<div class="item-big">
FIRST BIG ELEM
</div>
<div class="item-small">
SECOND SMALL ELEM
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-17 20:41:00
您可以向两个flex项添加一些margin-top，并向flex容器添加相同数量的负margin-top。
这样，flex容器的负边距将中和第一行的flex项的边距，但不会中和包装到其他行的项的边距。
.container {
margin-top: -30px;
}
.item-big, .item-small {
margin-top: 30px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top: -30px;
}
.item-big, .item-small {
margin-top: 30px;
background: red;
}
.item-big {
background: blue;
width: 300px;
}<div class="container">
<div class="item-big">
FIRST BIG ELEM
</div>
<div class="item-small">
SECOND SMALL ELEM
</div>
</div>
Stack Overflow用户
发布于 2021-11-10 10:20:45
如果您的浏览器支持CSS gap属性，则可以这样使用它
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 20px;
}gap在弹性子项周围添加了额外的空间。如果您只想在顶部和底部添加一些额外的空间，请改用row-gap。
对于不支持gap属性的浏览器，您可以使用lobotomized owl选择器来选择前面有相邻项的每个元素，这意味着它不会选择第一个元素。
.container > * + * {
margin-top: 20px;
}如果您只想在元素堆叠在一起时才使用* + *操作符添加此标记，则应将其包装在@media中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30887071
复制相关文章
相似问题