我正在使用一个内部开发的框架，它依赖于我们 HTML 的特定结构。棘手的事情之一是每一行都需要有自己的容器，有自己的类和数据属性。
所以问题来了。在不彻底改变 DOM 的情况下，我如何才能使下面的 flexbox 呈现出本质上像 HTML 表格一样的效果？还是表格是唯一的方法？该解决方案必须适用于 IE11 和 Chrome。
我试着让它看起来像这样......
Column A | Column B | Column C
1 | 2 | 3
section {
display: flex;
flex-wrap: wrap;
}
section .col {
flex: 1 1 auto;
}
section .line-break {
flex-basis: 100%;
width: 0px;
height: 0px;
overflow: hidden;
}<html>
<head>
</head>
<body>
<section>
<header>
<div class="col">Column A</div>
<div class="col">Column B</div>
<div class="col">Column C</div>
</header>
<div class="line-break"></div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</section>
</body>
</html>最佳答案
header, .row {
display: flex; /* aligns all child elements (flex items) in a row */
}
.col {
flex: 1; /* distributes space on the line equally among items */
}<section>
<header>
<div class="col">Column A</div>
<div class="col">Column B</div>
<div class="col">Column C</div>
</header>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</section>关于html - 布局类似于表格的 flexbox ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48570109/