CSS-设置所有子元素的总宽度等于其父元素

Question

我正在尝试创建一个包含矩形的正方形，每个矩形包含一个单词。每个子矩形的总宽度应等于父矩形的总宽度，但是问题是我不知道每个单词的顺序或长度，并且使用搜索过滤器可以动态更新客户端列表，因此我可以不会为每个包含的矩形静态分配宽度/ padding /边距。为了说明我的问题，这是我当前的代码，以及显示我当前拥有的屏幕截图。

<div class="index">
  <!-- heading, filter input and other stuff here -->
  <div class="books">
    <div class="book">Lorem</div>
    <div class="book">Ipsum</div>
    <div class="book">is</div>
    <div class="book">simply</div>
    <div class="book">dummy</div>
    <!-- rest of the book divs here -->
  </div>
</div>

我尝试在图像编辑器中四处移动矩形以显示我要实现的目标，但结果却一团糟。基本上，我想使矩形在其父正方形内“对齐”，以便使矩形与父所有边齐平。我宁愿在边距上使用width / padding，因为我希望所有边距保持1px。即单词的灰色背景应增加宽度。如果您需要查看我要实现的目标的图片，请告诉我，我将尝试再次进行调整。

还请注意，我正在使用Vue.js和Vuetify（矩形矩形由v-for生成），因此，如果您的答案包括Vue / Vuetify特定解决方案，我会非常高兴。但是为了将来的读者，我也很乐意接受香草的HTML / CSS / JS解决方案。

也请给我们这个效果的名称（如果有的话）。

Answer 1

我在https://jsfiddle.net/saksham_malhotra/52nz7rpf/使用flexbox创建了一个小提琴

这可以帮助您将书名散布到每行直到最后。

伪after元素用于在最后保留空白区域，而不是使最后几个框覆盖整行。

Answer 2

只需弯曲容器div并将flex应用于子类

.books {
  background-color: #333;
  width: 300px;
  padding: 5px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}

.book {
  background-color: #fefefe;
  margin: 3px;
  padding: 10px;
  flex: auto;
}

<div class="index">
  <!-- heading, filter input and other stuff here -->
  <div class="books">
    <div class="book">Lorem</div>
    <div class="book">Ipsum</div>
    <div class="book">is</div>
    <div class="book">simply</div>
    <div class="book">dummy</div>
    <div class="book">Lorem</div>
    <div class="book">Ipsum</div>
    <div class="book">is</div>
    <div class="book">simply</div>
    <div class="book">dummy</div>
    <div class="book">Lorem</div>
    <div class="book">Ipsum</div>
    <div class="book">is</div>
    <div class="book">simply</div>
    <div class="book">dummy</div>
    <!-- rest of the book divs here -->
  </div>
</div>

Answer 3

我建议对这种布局行为使用CSS Flexbox，因为它基本上是带有特定对齐规则的换行。

网络上有很多Flexbox资源，但我强烈建议您使用“ A Complete Guide to Flexbox”。

这里大概是CSS，我认为它将达到您想要的结果：

.books {
  /* Flexbox stuff */
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  /* Other stuff */
  background-color: lightgray;
}
.book {
  /* Flexbox stuff */
  flex-basis: content;
  /* Other stuff */
  margin: 1px;
  background-color: darkgray;
}

这是使用此CSS的CodePen示例： https://codepen.io/Da13Harris/pen/PvePxq