包装前占用盒子内的最大空间？答案

【问题标题】：Taking up maximum space inside a box before wrapping?包装前占用盒子内的最大空间？
【发布时间】：2023-02-16 21:51:53
【问题描述】：

因此，当我点击一些设计好的按钮时，我需要在我的页面上方显示一个框（绝对位置），在这个框内将是一个应该连续显示的“标签”列表。但我的问题是我无法使标签正确包装，占用了盒子的最大空间。我想在一行中显示尽可能多的标签。

知道这是否可能吗？

https://jsfiddle.net/e18d2ajh/

.vectors {
  display: inline-flex;
  min-width: 20vw;
  max-width: 50vw;
  background-color: #333;
  padding: 15px;
  margin-bottom: 15px;
}
  
.vector {
  display: flex;
  padding: .35rem;
  background-color: #c0c0c0;
  margin-right: .5rem;
}

<h5>
  with few boxes
</h5>
<div class="vectors">
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
</div>

<h5>
  with many boxes
</h5>
<div class="vectors">
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
</div>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

使用flex-wrap属性将内容包装到下一行

.vectors {
  ...
  flex-wrap: wrap;
  ...
}

.vectors {
  display: inline-flex;
  flex-wrap: wrap;
  min-width: 20vw;
  max-width: 50vw;
  background-color: #333;
  padding: 15px;
  margin-bottom: 15px;
}
  
.vector {
  display: flex;
  padding: .35rem;
  background-color: #c0c0c0;
  margin-right: .5rem;
}

<h5>
  with few boxes
</h5>
<div class="vectors">
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
</div>

<h5>
  with many boxes
</h5>
<div class="vectors">
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
</div>

【讨论】：

【解决方案2】：

你需要一个 flex-wrap: wrap 来表示 .vectors 和一个 flex-grow: 1 来表示 .vector 这样孩子们在包装后占据行中剩下的空白空间。请注意，最后一行可能看起来很难看，解决方案是使用伪元素。概括：

.vectors {
  flex-wrap: wrap;
}
.vectors::after {
  content: '';
  flex: 100 0 0;
}
.vector{
  flex-grow: 1;
}

这是codepen

【讨论】：

【解决方案3】：

你可以在.vectores上设置max-width:max-content和flex-wrap:wrap，这样就可以了，就像这样：

.vectors {
  display: inline-flex;
  min-width: 20vw;
  max-width: max-content;
  background-color: #333;
  padding: 15px;
  margin-bottom: 15px;
   /* lines I added */
  flex-wrap:wrap;
  gap:.5rem;
}
  
.vector {
  display: flex;
  padding: .35rem;
  background-color: #c0c0c0;
}

<h5>
  with few boxes
</h5>
<div class="vectors">
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
</div>

<h5>
  with many boxes
</h5>
<div class="vectors">
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
  <div class="vector">
    Random text
  </div>
</div>

【讨论】：