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

Posted 2023-03-06

【中文标题】仅当 flex 项目被包装时，margin-top

【英文标题】：margin-top only when the flex item is wrapped

【发布时间】：2015-09-02 10:07:50

【问题描述】：

我有一个包含两个弹性项目的弹性容器。我想在第二个上设置一个 margin-top，但前提是它被包裹而不是在第一个 flex 行。

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

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

这是我的代码：

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

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码 .请不要滥用代码块来绕过此要求。

问题是这种情况下我不需要用更多的代码来解释，所以如果需要分块代码是***的问题。

问题在于 SO 的 未来 用户是否有用。如果您的 JSfiddle 链接消失了，那么您的帖子基本上就没有用了。这就是为什么 SO 要求提供代码....理想情况下，在您创建问题时可以使用的代码 sn-ps 中。

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

【参考方案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>

【讨论】：

哦 CSS，你为什么要对我不满意

优秀的答案

当容器有背景颜色或边框时这不起作用

@FrankvanWijk 为您的边距修复使用嵌套的透明 div，并为视觉元素使用父级。

对于 2021 年及以后的其他人，寻找一个不那么老套的答案，请查看 CSS 'gap' 属性：coryrylan.com/blog/css-gap-space-with-flexbox

【参考方案2】：

如果您的浏览器支持 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;

如果你想使用* + *操作符添加这个marign，只有当元素堆叠在一起时，你应该把它包装在@media中。

【讨论】：

很好的功能，但在 Safari 中的支持仍然很差（只有最新版本才能使用）。因此，如果您想支持更旧的浏览器，那么更喜欢使用负/正边距的混合来创建差距。

对于旧浏览器的第二个解决方案也无济于事：第二列被计为第二个元素，并且将添加上边距。