如何添加内嵌元素以填充可用的水平空间？ [重复]

Question

这个问题在这里已有答案：

• Set the width of children to fill the parent 7个答案
• Resize unknown number of elements to fill width of parent container 3回答

我的目标是让项目填充父项的整个宽度。如果这是静态的，我可以像width:%一样使用width:33% 3项。问题是项目数量会发生变化

#container {
  background-color:red;
}
.item {
  background-color:yellow;
  display:inline-block;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <!-- here new items will be added -->
</div>

Answer 1

您可以使用flexbox使用以下解决方案。您可以在不更改CSS的情况下在HTML上添加更多元素：

#container {
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
}
.item {
  border:1px dashed red;
  width:100%;
}

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

Answer 2

这项任务可以通过以下几种方式完成：Flexbox，quantity queries和display: table。我建议无论如何使用第一种方法，除非你需要支持IE<10

---

1. Flexbox

Codepen demo

标记

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <!-- here new items will be added -->
</div>

CSS

#container {
  display: flex;
}

#container > div {
  flex: 1; 
}

这样做所有内部元素将始终采用均匀分布的相同空间。

---

2. Quantity queries

另一种选择是浮动元素并使用quantity queries，如果你有有限数量的内部元素，例如

Codepen demo

标记

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS

#container > div:nth-last-child(5):first-child,
#container > div:nth-last-child(5):first-child ~ div {
  width: 20%;
  float: left;
}

当然，这种方法需要在CSS中设置可能出现在容器内的每个可能数量的内部div的样式，并且还需要在父容器上进行一些浮动清除。它的可持续性较低，但也值得一提。

---

3. display: table;

最后，最后一个例子利用了display: table和table-cell

Codepen demo

这里的风格很简单

#container { 
   display: table; 
   width: 100%; 
}

.item { 
   display: table-cell; 
}