Html 如何使用 Flex CSS 并模拟 rowspan 2 和 colspan 2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37039029/
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
How to use Flex CSS and simulate a rowspan 2 and colspan 2
提问by ?ngelo Rigo
I want to build a responsive layout with 2 rows using divs .
我想使用 divs 构建一个 2 行的响应式布局。
I try this jsbin: http://jsbin.com/jiyanayayi/edit?html,css,output
我试试这个jsbin：http://jsbin.com/jiyanayayi/edit?html,css,output
The first row will have three cells, the last one (cell 3) must have a rowspan = 2
第一行将有三个单元格，最后一个（单元格 3）必须有一个 rowspan = 2
The second row (cell4) having a colspan = 2must be limited by the cell 3.
具有 a 的第二行（colspan = 2单元格 4 ）必须受单元格 3 的限制。
I tried the CSS below, but the rowspanatribute did not work.
我尝试了下面的 CSS，但rowspan属性不起作用。
How can I create this responsive layout format?
如何创建这种响应式布局格式？
.row{
display: flex;
}
.cell{
flex: 1;
background:#eee;
border: 1px solid #444;
padding: 15px;
}
The HTML:
HTML：
<div class="table">
<div class="row">
<div class="cell">Cell 1 </div>
<div class="cell">Cell 2 </div>
<div class="cell rowspan2">Cell 3 </div>
</div>
<div class="row">
<div class="cell colspan2">Cell 4</div>
</div>
</div>
回答by G-Cyrillus
you need to use also flex and flex-wrap:
您还需要使用 flex 和 flex-wrap：
.table {
display: flex;
border: solid;
}
.row {
flex: 1;
display: flex;
}
.row:first-of-type {
flex-flow: wrap;
}
.row .rowspan2 {
flex: 1 1 100%;
}
.row div {
border: solid;
padding: 1em;
flex: 1;
}
/* ============================================================== */
/* if display grid and contents is supported then you may use it */
/* ============================================================== */
/*
@supports (display:grid) and (display:contents) {
.table {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-areas: "cell1 cell2 cell3 cell3" "cell4 cell4 cell3 cell3";
border: solid;
}
.row {
display: contents/* hide them in the structure. .row respective children become sibblings *//*
}
.row:first-child> :first-child {
grid-area: cell1;
}
.row:first-child div {
grid-area: cell2;
}
.row .cell.rowspan2 {
grid-area: cell3;
/*grid-row:span 2; no need if grid-template-area is complete*//*
}
div div {
border: solid;
padding: 1em;
}
.colspan2 {
grid-area: cell4;
/*grid-column : span 2; no need if grid-template-area is complete*//*
}
}
*/<div class="table">
<div class="row">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell rowspan2">Cell 3</div>
</div>
<div class="row">
<div class="cell colspan2">Cell 4</div>
</div>
</div>jsbin updated with @supportsuncommented : https://jsbin.com/wexisiyamo/1/edit?html,css,output
jsbin 更新未@supports注释：https: //jsbin.com/wexisiyamo/1/edit?html,css,output
