边距-顶部仅当弹性项包装

我有一个弹性容器，里面有两个弹性物品。我想设置一个利润率顶部的第二个，但只有当它的包装，而不是在第一弯曲线。

如果可能的话，我希望避免使用媒体查询。

我认为边际底部的第一个元素可能是一个解决方案。但是，当元素没有被包装时，它在底部增加了空间，所以同样的问题。

这是我的暗号:

.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>

37138 次浏览
小开
最佳答案

您可以向这两个 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>

如今，在这个 回答提出的柔性布局容器中，对 css (行 -)间隔属性有了全面的支持(MDN)。该走的路。

小开

如果您的浏览器支持 CSS gap属性，您可以这样使用它

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 20px;
}

gap在 flex-child 项周围添加了额外的空间。如果您只想在顶部和底部添加一些额外的空间，则使用 row-gap代替。

对于不支持 gap属性的浏览器，您可以使用 lobotomized owl选择器，它选择每个元素前面有一个相邻的项，这意味着它不会选择第一个。

.container > * + * {
margin-top: 20px;
}

如果仅当元素叠加在一起时才使用 * + *运算符添加此边距，则应将其包装在 @media中。

第三个解决方案与 :not()和 :first-child CSS pseudo-class

.container:not(:first-child) {
margin-top: 20px;
}

提交答案