flexwrap時的邊距-有解無憂

我在使用 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 小于 490px（它包裝）時，“我的按鈕”和“內容”中的最后一項之間存在邊距，這將是示例中的“正確內容”。

有沒有辦法這樣做？

uj5u.com熱心網友回復：

將此與內容一起使用margin-bottom:clamp(0px,(450px - 100%)*9999,20px)。這是基于 value 的條件保證金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>

uj5u.com熱心網友回復：

不幸的是，只有 CSS，沒有。如果您的 div 寬度依賴于螢屏寬度之類的東西，您可以使用媒體查詢。

使用 javascript，您可以輪詢元素的寬度，并有條件地添加或洗掉按鈕所需的樣式margin-top。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/326586.html

標籤：css 弹性盒

上一篇：適合容器的內容

下一篇：懸停專案，在專案文本的寬度下獲得一個框