Flex CSS rowspan 2和colspan 2

Question

我想用div創建一個具有2行的響應式佈局。

我從這個jsbin嘗試：http://jsbin.com/jiyanayayi/edit?html,css,output

第一行將具有三個單元，最後一個（小區3），其具有具有colspan = 2一個rowspan = 2

第二行（CELL4）由限制cell 3.

我試過這個CSS，但rowspan屬性沒有工作。

如何創建此響應式佈局格式？

.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> 

Answer 1

，你也需要使用Flex和柔性包裝：

.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>