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

Question

我的目标是让项目填充父级的整个宽度。 如果这是静态的，我可以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上添加更多元素：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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如果内部元素数量有限，例如。

  

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; 
}