布置类似于表格的柔性盒？ [英] Layout a flex box similar to a table?
问题描述
我正在使用一个内部开发的框架，这个框架依赖于我们的HTML的特定结构。其中一个棘手的问题是每一行都需要自己的容器，它有自己的类和数据属性。
所以问题就出在这里。如果没有彻底改变DOM，我怎样才能使Flex框下面的呈现基本上像一个HTML表格呢？或者是唯一的方式？该解决方案将不得不在IE11和Chrome浏览器中工作。
我试图让它看起来像这样...
列A | B列|列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> < /头> <身体GT; <节> <报头GT; < div class =col> A列< / div> < div class =col> B列< / div> < div class =col>列C< / div> < /报头> < div class =line-break>< / div> < div class =row> < div class =col> 1< / div> < div class =col> 2< / div> < div class =col> 3< / div> < / DIV> < /节> < / body>< / html>
因为这可以使用CSS完成，所以您可以轻松地在任何显示类型之间进行切换，例如 flex ， block 等。，甚至是 float ，使用媒体查询等。
我也删除了<$ c $因为你不需要，但是如果它是由一个组件或类似的东西渲染的，保持原样 b
$ b 如果您仍然需要或必须使用Flexbox，则此操作不会发生任何问题。
更新了一个示例，展示了一些有用的Flexbox内容，它们具有不同的宽度和跨度列。
$ b
Stacks片段 - Flexbox（ IE11的小提琴演示）
.tbl {display：flex; flex-direction：column;}。row {display：flex; min-height：50px;}。cell {flex：4; cell：nth-child（1）{flex：1;}。cell：nth-child（2）{flex：2;}。cell.span4-5 {flex：8 24px; border：1px solid red;}。 / * 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; / *中心水平。 * / align-items：center; / *中心垂直。 * /}。row .cell {padding：5px; box-sizing：border-box;}
< div类= TBL > < div class =row> < div class =cell> ID< / div> < div class =cell> Nr< / div> < div class =cell>标题1< / div> < div class =cell span4-5>标题2< / div> < / DIV> < div class =row> < div class =cell> 1< / div> < div class =cell> 2< / div> < div class =cell>内容< / div> < div class =cell>内容< / div> < div class =cell>内容< / div> < / DIV> < div class =row> < div class =cell> 2< / div> < div class =cell> 3< / div> < div class =cell span3-5>内容< / div> < / DIV> < div class =row> < div class =cell> 1< / div> < div class =cell> 2< / div> < div class =cell span3-4>内容< / div> < div class =cell>内容< / div> < / div>< / div>
$ b
堆栈片段 - CSS表格
section {display：table;宽度：100％;}节> * {display：table-row;} section .col {display：table-cell;}
< HTML> < HEAD> < /头> <身体GT; <节> <报头GT; < div class =col> A列< / div> < div class =col> B列< / div> < div class =col>列C< / div> < /报头> < div class =row> < div class =col> 1< / div> < div class =col> 2< / div> < div class =col> 3< / div> < / DIV> < /节> < / body>< / html>
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.
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.
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>
If the content you are going to present is of type tabular data, then CSS Table is the proper way.
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.
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.
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:
Updated, a sample showing some useful Flexbox stuff, with varying width's and span columns.
Stack snippet - Flexbox (Fiddle demo for IE11)
.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
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>
这篇关于布置类似于表格的柔性盒？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
