如何制作具有未知列数的网格布局,并且每列具有相同的大小？

Question

我需要创建一列列,列数可以是5到10,每列的宽度应该相等,我怎样才能通过仅使用css而不使用<table>？

现在我正在使用引导程序,但它只有固定大小.我现在通过Google搜索找到的所有解决方案都是使用<table>元素进行演变,但据我所知,这是错误的方法,我听过很多次都没有<table>用于模板化.

迄今为止我一直在考虑的最优雅的解决方案(尚未测试)是动态计算宽度javascript并在飞行中更改它,还有另一种更好的方法吗？

谢谢.

Answer 1

使用flexbox.

父元素应该display: flex在其CSS中.它的每个子节点(列)应该具有flex: 1(这允许元素尽可能地缩小和增长,而不管内容如何).

这是一个例子:

.container {
    display: flex;
}

.column {
    flex: 1;
    border: 1px solid #000;
}

<div class="container">
    <div class="column">Contents don't matter for width.</div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>