Html 布局一个类似于表格的弹性框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48570109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Layout a flex box similar to a table?
提问by Steve Wortham
I'm working with a framework developed in-house which depends on a certain structure to our HTML. And one of the tricky things is that each row needs its own container with its own classes and data attributes.
我正在使用内部开发的框架，该框架依赖于我们 HTML 的特定结构。棘手的事情之一是每一行都需要自己的容器，具有自己的类和数据属性。
So here's the problem. Without drastically changing the DOM, how can I make the flex box below render essentially like an HTML table would? Or is a table the only way? The solution will have to work in both IE11 and Chrome.
所以问题来了。在不彻底改变 DOM 的情况下，我怎样才能让下面的 flex 框基本上像 HTML 表格一样呈现？还是桌子是唯一的方法？该解决方案必须同时适用于 IE11 和 Chrome。
I'm trying to make it look like this...
我试图让它看起来像这样......
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>采纳答案by Ason
If the content you are going to present is of type tabular data, then CSS Table is the proper way.
如果您要呈现的内容是表格数据类型，那么 CSS Table 是正确的方式。
Since this can be done using CSS, you can easily swap between any display type such as flex, block, etc., or even float, using media query etc.
由于这可以使用CSS来完成，你可以轻松地将任何显示类型之间，如交换flex，block等等，甚至float，利用媒体查询等。
I also removed the <div class="line-break"></div>element, since you don't need, though if it is rendered by a component or similar, leaving it as is won't cause any problem.
我还删除了该<div class="line-break"></div>元素，因为您不需要它，但如果它是由组件或类似组件呈现的，则保持原样不会导致任何问题。
If you still need, or have to, use Flexbox, this answer of mine mention the difference between CSS Table and Flexbox on two important features:
如果您仍然需要或必须使用 Flexbox，我的这个答案提到了 CSS Table 和 Flexbox 在两个重要功能上的区别：
Updated, a sample showing some useful Flexbox stuff, with varying width's and span columns.
更新了一个示例，展示了一些有用的 Flexbox 内容，具有不同的宽度和跨度列。
Stack snippet - Flexbox (Fiddle demo for IE11)
堆栈片段 - Flexbox（IE11 的 Fiddle 演示）
.tbl {
display: flex;
flex-direction: column;
}
.row {
display: flex;
min-height: 50px;
}
.cell {
flex: 4;
border: 1px solid red;
}
.cell:nth-child(1) {
flex: 1;
}
.cell:nth-child(2) {
flex: 2;
}
.cell.span4-5 {
flex: 8 24px; /* col 4,5 flex-grow/border/padding */
}
.cell.span3-4 {
flex: 8 24px; /* col 3,4 flex-grow/border/padding */
}
.cell.span3-5 {
flex: 12 36px; /* col 3,4,5 flex-grow/border/padding */
}
.row:first-child .cell {
display: flex;
justify-content: center; /* center horiz. */
align-items: center; /* center vert. */
}
.row .cell {
padding: 5px;
box-sizing: border-box;
}<div class="tbl">
<div class="row">
<div class="cell">ID </div>
<div class="cell">Nr </div>
<div class="cell">Header 1 </div>
<div class="cell span4-5"> Header 2 </div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
</div>
<div class="row">
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell span3-5">Content</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell span3-4">Content</div>
<div class="cell">Content</div>
</div>
</div>Stack snippet - CSS Table
堆栈片段 - CSS 表
section {
display: table;
width: 100%;
}
section > * {
display: table-row;
}
section .col {
display: table-cell;
}<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="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</section>
</body>
</html>回答by Michael Benjamin
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>