Html div的智能/液体内联间距

我有一个容器，里面有两个容器。

<div id="container">

<div id="box1">
</div>

<div id="box2">
</div>

<div id="box3...4...">
</div>

</div>

我希望主容器跨越页面的整个宽度。（宽度：100%；）

我希望两个子容器均匀分布并填充页面上的水平空间

我希望能够添加第三个甚至第四个儿童容器，并让它们全部填充从50%50%到~33%~33%~33%到25%25%25%25%，依此类推

---

如果有一种方法可以轻松做到这一点？对不起，如果我没有解释清楚，这是我第一次问问题

只需在容器上指定

display:flex

，然后在子元素上指定

flex:1

（或

flex grow:1

，即可使用

flex

，如下所示：

.container{
显示器：flex；
}
.集装箱{
flex:1；/*或“flex-grow:1”*/
最小高度：100px；
边框：1px纯红；
}

---

只需在容器上指定

display:flex

，然后在子元素上指定

flex:1

（或

flex-grow:1

），即可使用

flex

，如下所示：

.container{
显示器：flex；
}
.集装箱{
flex:1；/*或“flex-grow:1”*/
最小高度：100px；
边框：1px纯红；
}