css 柔性行换行：最后一项不应占用剩余宽度[重复]

biswetbf 于 2023-02-10 发布在其他

关注(0)|答案(2)|浏览(101)

- 此问题在此处已有答案**：

How to keep wrapped flex-items the same width as the elements on the previous row?（14个答案）
3天前关闭。
这里是Playground：

.container {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  justify-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  border: 1px solid salmon;
}


.item {
  flex: 1 1 auto;
  min-width: 50px;
  height: 6rem;
  padding: 1rem;
  box-sizing: border-box;
  background-color: teal;
  border-radius: 0.4rem;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
}

<div class="container">

  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content in the item</div>

</div>

如你所见，最后一项占用了剩余的空间，我希望它不要占用，而是占用文本所需的空间。我应该如何继续？
我知道我可以使用网格布局，但我想留在弹性布局。

css

来源：https://stackoverflow.com/questions/75362622/flex-row-wrap-last-item-should-not-take-remaining-width

2条答案

按热度按时间

fdbelqdn1#

这是另一个答案建议的last-child实现，它做了你在问题中真正要求的事情，但我不确定这是你真正想要的。

.container {
  width: 500px;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  justify-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  border: 1px solid salmon;
}

.item {
  flex: 1 1 auto;
  min-width: 50px;
  height: 6rem;
  padding: 1rem;
  box-sizing: border-box;
  background-color: teal;
  border-radius: 0.4rem;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
}

.item:last-child {
  flex: 0 0 auto;
}

<div class="container">

  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content</div>
  <div class="item">Some content in the item</div>

</div>

赞(0）回复(0）举报 2023-02-10

abithluo2#

您可以随时使用:last-child，这里是link及其相关文章，因此您可以通读它并尝试自己实现它。

赞(0）回复(0）举报 2023-02-10