Question

我有一个带有两个弹性项目的弹性容器。我想在第二个上设置一个margin-top，但只有当它被包裹而不是在第一个flex line时。

如果可能，我想避免使用媒体查询。

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

这是我的代码：

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item-big {
  background: blue;
  width: 300px;
}
.item-small {
  background: red;
  margin-top: 30px;
}

＆＃13;

<div class="container">
  <div class="item-big">
    FIRST BIG ELEM
  </div>
  <div class="item-small">
    SECOND SMALL ELEM
  </div>
</div>

＆＃13;

Answer 1

您可以向两个弹性项目添加一些margin-top，并向弹性容器添加相同金额的负margin-top。

这样，弹性容器的负边距将中和第一行的弹性项目的边距，而不是包裹到其他线条的项目的边距。

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

仅当flex项目被包装时，margin-top

1 个答案: