四列div與3個常規列和1垂直旋轉

Question

我正在嘗試使div包含列。

1. 第一個應該是垂直旋轉。其中的文本應該是垂直和水平居中。它也應該有10％的背景和寬度。
2. 其餘列（2,3,4）的寬度應爲30％。

這樣做的最佳方法是什麼？

P.S.當然，div應該是有反應的，並且應該在任何分辨率下看起來不錯。

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>