css Package 前是否占用 Package 盒内的最大空间？

a8jjtwal 于 2023-02-17 发布在其他

关注(0)|答案(3)|浏览(112)

所以我需要显示一个框（绝对位置）在我的网页上时，点击一些按钮设计，在这个框内将是一个列表的“标签”，应该显示在一行。但我的问题是，我不能管理，使标签 Package 正确，占用最大的空间框。我想显示尽可能多的标签在一行。
你觉得这可能吗？
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>

css

来源：https://stackoverflow.com/questions/71673021/taking-up-maximum-space-inside-a-box-before-wrapping

3条答案

按热度按时间

rggaifut1#

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

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

x一个一个一个一个x一个一个二个x

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

bnl4lu3b2#

您需要为.vectors指定一个flex-wrap: wrap，为.vector指定一个flex-grow: 1，这样子元素就可以占用换行后行中剩余的空间。注意，最后一行可能看起来很难看，解决方案是使用伪元素。摘要：

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

这是codepen

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

l7wslrjt3#

你可以用flex-wrap:wrap在.vectores上设置max-width:max-content，这样就可以完成这个任务，如下所示：

.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>

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

我来回答

css Package 前是否占用 Package 盒内的最大空间？

3条答案

相关问题

热门标签

最新问答