flex 换行时的边距答案

【问题标题】：Margin when flex wrapsflex 换行时的边距
【发布时间】：2021-10-20 05:37:36
【问题描述】：

我在使用 flex 时遇到以下情况：Codepen

<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.first-card {
  border: 1px black solid;
  width: 480px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  
}

.content {
  flex-wrap: wrap;
  grid-gap: 32px;
  display:flex;
}

.left-content {
  border: 1px green solid;
  flex-grow: 1;
  flex-basis: 200px;
}

.right-content {
  flex-grow: 1;
  border: 1px deeppink solid;
  flex-basis: 200px;
}

</style>
</head>
  <body>
    <div class="first-card">
      <h1>Title</h1>
      <div class="content">
        <div class="left-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam ab assumenda ex sint esse atque consectetur in velit voluptate quibusdam beatae quam vero a natus, id recusandae laudantium sed, incidunt rem? Dolores eveniet beatae asperiores repellendus veniam hic accusantium qui, totam non fuga earum nobis architecto. Et rem alias tempore.
        </div>
        <div class="right-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, consequuntur omnis doloremque nostrum aliquam minima facere, modi possimus quo atque velit eum pariatur assumenda, quisquam laborum officiis at! Ut libero accusamus delectus dignissimos vitae reiciendis quasi tempora labore culpa doloremque ullam, vero, enim repellat qui nihil quaerat? Reiciendis, aspernatur quo?
        </div>
      </div>
      <div class="buttons">
        <button> My button</button>
      </div>
    </div>
  </body>
</html>

我希望当 div 小于 490 像素（它会换行）时，“我的按钮”和“内容”中的最后一项之间存在边距，这将是示例中的“正确内容”。

有办法吗？

【问题讨论】：

标签： css flexbox

【解决方案1】：

将此与内容 margin-bottom:clamp(0px,(450px - 100%)*9999,20px) 一起使用。这是基于值450px 的条件边距。如果容器大于450px，则为0px，否则为20px

* {
  box-sizing: border-box;
}

.first-card {
  border: 1px black solid;
  width: 480px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  overflow:auto;
  resize:horizontal;
}

.content {
  flex-wrap: wrap;
  grid-gap: 32px;
  display: flex;
  margin-bottom:clamp(0px,(450px - 100%)*9999,20px)
}

.left-content {
  border: 1px green solid;
  flex-grow: 1;
  flex-basis: 200px;
}

.right-content {
  flex-grow: 1;
  border: 1px deeppink solid;
  flex-basis: 200px;
}

<html>

<body>
  <div class="first-card">
    <h1>Title</h1>
    <div class="content">
      <div class="left-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam ab assumenda ex sint esse atque consectetur in velit voluptate quibusdam beatae quam vero a natus, id recusandae laudantium sed, incidunt rem? Dolores eveniet beatae asperiores repellendus
        veniam hic accusantium qui, totam non fuga earum nobis architecto. Et rem alias tempore.
      </div>
      <div class="right-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, consequuntur omnis doloremque nostrum aliquam minima facere, modi possimus quo atque velit eum pariatur assumenda, quisquam laborum officiis at! Ut libero accusamus delectus dignissimos vitae
        reiciendis quasi tempora labore culpa doloremque ullam, vero, enim repellat qui nihil quaerat? Reiciendis, aspernatur quo?
      </div>
    </div>
    <div class="buttons">
      <button> My button</button>
    </div>
  </div>
</body>

</html>

【讨论】：

不，你是这样管理的，啊哈哈。你介意解释一下为什么 (450px -100%) * 9999 吗？我得到了 450px 的部分，但是 -100% 和 *9999 我没有。
@EduardoSousa 100% 是父元素的宽度，所以它是 450px - 父元素的宽度。 9999 是为了确保我们总是得到一个很大的值（负数或正数）以避免落入范围 [0 20]。这将确保我们总是有大于 20px（所以限制为 20px）或小于 0（所以限制为 0）

【解决方案2】：

不幸的是，只有 CSS，没有。如果你的 div 宽度依赖于屏幕宽度，你可以使用media queries。

使用 javascript，您可以轮询元素的宽度，并有条件地添加或删除按钮 margin-top 所需的样式。

【讨论】：