给定以下代码,我想找到一种方法,让一系列内联块元素拉伸父元素的整个宽度,同时在行换行时堆叠在彼此的顶部.
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
例
如果所有孩子都具有相同的最小宽度,我希望这创建一个网格效果.例如,在较大的屏幕上,孩子们可以叠加5个,直到他们换到第二行.我希望这些都是可用宽度的20%(1/5).当屏幕缩小时,第五个和第十个项目包裹两行4个项目和第三行2个项目.现在我想让孩子们伸展可用宽度的25%(1/4),除了两个孩子的最后一排.那些应该是50%.
尝试
我试过漂浮孩子,让他们成为内联块,我尝试使用flex-box,但他们都没有给我我想要的结果.内联块最接近,允许它们与父宽度收缩一样堆叠,但我无法实现拉伸.
限制
我不想使用媒体查询,因为我需要在此示例的确切断点中编写,然后在站点布局中发生任何更改时更改所有这些.我想找到一种更有机的方法来解决这个问题.
Javascript已经出来了.我想找到一种只使用CSS的方法.
突出强调了Flexbox用于1-D，而Grid用于2-D，但是我还没有找到清楚的解释，为什么不能将Grid用于1-D并替代Flexbox。在我来到最接近的就是
但是您也可能会争辩说，像这样的纯一维布局在Flexbox中更强大，因为Flexbox允许我们更轻松地移动这些元素（例如，将它们全部移动到一侧或另一侧，更改其顺序，将它们均匀地隔开等）。
我将Grid和Flexbox用于基本布局：框在页面上的一般放置以及一些动态的（通常是堆叠的）。美观的（烤面包机，模式，...）通过框架进行管理。我还没有发现Grid无法立即替换Flexbox的情况（即没有高级CSS 技巧或很多代码）。
以上面的引用为例，提到的所有“动作”都可以在Grid中直接使用，通常具有与Flexbox相同的语义。
Flexbox涵盖哪些难以或无法通过Grid管理的基本领域？
编辑：浏览器支持并不重要（我只使用常绿的浏览器，如果需要可以切换）