如何使用Flex CSS并模拟rowpan 2和colspan 2 [英] How to use Flex CSS and simulate a rowspan 2 and colspan 2

问题描述

我想使用divs构建具有2行的响应式布局。

I want to build a responsive layout with 2 rows using divs .

我尝试使用此jsbin： http://jsbin.com/jiyanayayi/edit?html,css,output

I try this jsbin: http://jsbin.com/jiyanayayi/edit?html,css,output

第一行将包含三个单元格，最后一行（单元格3）必须具有 rowspan = 2

The first row will have three cells, the last one (cell 3) must have a rowspan = 2

第二行（cell4）的 colspan = 2 必须受单元格3的限制。

The second row (cell4) having a colspan = 2 must be limited by the cell 3.

下面的CSS，但是 rowspan 属性没有起作用。

I tried the CSS below, but the rowspan atribute did not work.

如何创建这种自适应布局格式？

How can I create this responsive layout format?

.row{
  display: flex;
}
.cell{
  flex: 1;
  background:#eee;
  border: 1px solid #444;
  padding: 15px;
}

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>

推荐答案

您还需要使用flex和flex-wrap：

you need to use also flex and 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已更新为 @supports 未注释： https ：//jsbin.com/wexisiyamo/1/edit？html，css，output

jsbin updated with @supports uncommented : https://jsbin.com/wexisiyamo/1/edit?html,css,output

这篇关于如何使用Flex CSS并模拟rowpan 2和colspan 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！