html - 为什么 flexbox 在包装元素后不收缩以适应？

Question

这个问题在这里已经有了答案:





Make container shrink-to-fit child elements as they wrap

(4 个回答)



CSS when inline-block elements line-break, parent wrapper does not fit new width

(2 个回答)


1年前关闭。




我想要一个最大宽度超过该宽度的 flex-box，但它也适合 flexbox 内任何给定“行”的最大大小。

我现在面临的问题是任何超出最大宽度然后包裹的元素都会导致 flexbox 仍然占据最大宽度。

这是演示该问题的代码笔的链接:

https://codepen.io/heroes-coding/pen/rNaGYmo

这是顶部容器的 html/css:

<div class="holder">
  <div class="flexbox">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

body {
  background: black;
}

.holder {
  width: 650px;
  background: gray;
  margin-top: 50px;
}

.flexbox {
  display: flex;
  background: blue;
  max-width: 500px;
  width: fit-content;
  flex-wrap: wrap;
}

.item {
  width: 100px;
  height: 50px;
  background: red;
  border-bottom: 1px dotted white;
  border-top: 1px dotted white;
  border-right: 1px dotted white;
}
.item.wide {
  width: 200px;
}

我想让 flexbox 仍然以 500px 包裹，但在包裹发生后缩小以适应内容。

Answer 1

仅靠 CSS，您无法完全实现您的要求。您可以做什么来设置每行要显示的最大元素数，然后计算传递给 flexbox 容器的最大宽度:

:root{
   --item-width: 100px;
   --max-per-row: 4;
   --max-width: calc( var(--max-per-row) * ( var(--item-width) + 1px)  );
}

使用此代码，您可以将容器的宽度设置为您想要的任何值，例如 500 像素，然后确保最大宽度为 n * flexbox 元素的宽度(边框加 1)，其中 n 是您想要的每行元素数。只要确保 flexbox 宽度大于 max-width 即可。

:root{
   --item-width: 100px;
   --max-per-row: 4;
   --max-width: calc( var(--max-per-row) * ( var(--item-width) + 1px)  );
}

body {
  background: black;
}

.holder {
  width: 650px;
  background: gray;
  margin-top: 50px;
}

.flexbox {
  display: flex;
  background: blue;
  width: 500px;
  max-width: var(--max-width);
  flex-wrap: wrap;
}

.item {
  width: var(--item-width);
  height: 50px;
  background: red;
  border: 1px dotted white;
  border-left: none;
}
.item.wide {
  width: 200px;
}

<div class="holder">
  <div class="flexbox">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>