3列の垂直列と1列の垂直列を持つ4列のdiv

Question

の列を含むdivを作成しようとしています。

1. 最初のものは、を垂直回転しなければなりません。テキストはの縦と横を中心にしてください。また、背景と幅を10％にする必要があります。
2. 残りの列（2,3,4）の幅は30％にする必要があります。

これを行うにはどのような方法が最適ですか？

P.S.もちろん、ディビジョンは応答性があり、どんな解決策にも見えるはずです。

Answer 1

他のdivが（30％の幅が小さすぎる）場合は、min-heightまたはheightを追加する必要があります。私の場合は300pxを追加しました。

.flex { 
 
    display: flex; 
 
} 
 

 
.flex-center-all { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 10%; 
 
    background: green; 
 
    min-height: 300px; 
 
} 
 

 
.rotate { 
 
    transform: rotate(90deg); 
 
} 
 

 
.container { 
 
    width: 100%; 
 
} 
 

 
.container > div:not(.flex-center-all) { 
 
    width: 30%; 
 
}

<div class="flex container"> 
 
    <div class="flex-center-all"> 
 
    <div class="rotate">rotate</div> 
 
    </div> 
 
    <div>text <br> txt</div> 
 
    <div>text</div> 
 
    <div>text</div> 
 
</div>