仅当包装弹性商品时才在页边空白

我有一个带有两个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>

展开摘要

css margin flexbox

— 曼努埃尔·迪奥里奥（Manuel Di Iorio）
source

寻求调试帮助的问题（“此代码为什么不起作用？”）必须包括所需的行为，特定的问题或错误以及在问题本身中再现该错误所需的最短代码。请不要滥用代码块来解决此要求。

— Paulie_D 2015年

问题在于，在这种情况下，我不需要解释更多的代码，因此如果需要块代码，则这是StackOverflow的问题。

— Manuel Di Iorio 2015年

问题是对SO的未来用户有用。如果您的JSfiddle链接消失了，那么您的帖子基本上是没有用的。这就是为什么SO要求提供代码的原因。。。。最好是在创建问题时提供的代码段中。

— Paulie_D 2015年

好的，我了解，我正在编辑问题以遵守规则；）

— Manuel Di Iorio 2015年

174

您可以margin-top向两个弹性项目中添加一些，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>

展开摘要

— i
source

114

噢，CSS，为什么你对我

— 不满意

— 好的

当容器具有背景颜色或边框时，此方法将无效

— Frank van Wijk