HTML ve CSS kullanarak yatay bir tablo görüntüleme dikdörtgenlerinin içine dikey bir tablo ekranı dikdörtgeni nasıl ekleyebilirim?

Question

3 dikdörtgenin bulunduğu bir sayfa oluşturmak istiyorum (siyah renkte). Kod bunu gösterir. Şimdi 2. yatay dikdörtgenin içinde, farklı boyutlarda (kırmızı renkte) 3 dikey dikdörtgenin içinde oluşturmak istiyorum. Her bir metin her bir dikdörtgenin içinde ortalanmalıdır (dikey ve yatay).

nasıl 2 dikdörtgenin içine 3 sütun eklemek ve do bu tüm metni ortalama:

<div class="wrap"> 
    <div class="row_wrap"> 
    <div class="head x"> 
     ONE 
    </div> 
    </div> 
    <div class="row_wrap"> 
    <div class="middle x"> 
     TWO 
    </div> 
    </div> 
    <div class="row_wrap"> 
    <div class="bottom x"> 
     THREE 
    </div> 
    </div> 
</div> 

body {font-size:36px; color:green;} 
.wrap {display: table; width:100%;} 
.row_wrap{display:table-row;} 
.x{display:table-cell; vertical-align:middle; text-align:center;} 
.head{height:200px; background:#fa4;} 
.middle{height:400px; background:#4af;} 
.bottom{height:100px; background:#a4f;} 

Answer 1

Bu soru eski biliyorum ama bu çözmek mümkün olduğunu biliyorum ilginç flexbox kullanarak.

.row, .column{ 
 
    display: flex; 
 
} 
 

 
.row{ 
 
    width: 100%; 
 
    height: 10rem; 
 
    border: 3px solid black; 
 
    flex-flow: 
 
} 
 

 
.column{ 
 
    border:3px solid red; 
 
    height: 100%; 
 
    flex: 1; 
 
} 
 

 
.column--big{ 
 
    flex: 2; 
 
} 
 

 
.center{ 
 
    justify-content: center; 
 
    align-items: center 
 
}

<div class="row center"> 
 
    <span>Center</span> 
 
</div> 
 

 
<div class="row center"> 
 
    <div class="column center"> 
 
    <span>Center</span> 
 
    </div> 
 
    <div class="column column--big center"> 
 
    <span>Center</span> 
 
    </div> 
 
    <div class="column center"> 
 
    <span>Center</span> 
 
    </div> 
 
</div> 
 

 
<div class="row center"> 
 
    <span>Center</span> 
 
</div>

Bu kod

besbelli optimize edilebilir, ancak bu bir başlangıç.