CSSフレックス方向を変更する

Question

ブロックのフレックス方向をブロック間で変更することはできますか？

私はフレックスを使ってブロックの列を（垂直に、明らかに）実行していますが、これらのブロックの中間ブロックには、水平に実行する必要がある3つの小さなインナーブロックがあります。そして、私はdisplay: inline-blockを試しました。親をdisplay: flex; flex-direction: rowに設定します。私はflex: 0とflex: noneに設定しようとしましたが、それらはまだ列に表示されます。これら三つの内側のブロックが編集可能な幅で水平に表示しながら、どのように私は両親が縦に表示し、垂直方向の利用可能なスペースを埋める作るん

0.body 
    ->>1.overall container (has `display: flex; flex-direction: column`) 
    ->>2.a label block (vertical, has fixed height) 
    ->>2.a label block (vertical, has fixed height) 
    ->>2.the container block (vertical, has `flex: 1`) 
     ->>3.inner-block one (should be horizontal) 
     ->>3.inner-block two (should be horizontal) 
     ->>3.inner-block third (should be horizontal) 
    ->>2.a label block (vertical, has fixed height) 
    ->>2.a label block (vertical, has fixed height) 

：

だから、この構造を想像しますか？

Answer 1

私は構造を想像し、ここで何ができるかです：

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.container > .label { 
 
    width: 100%; 
 
} 
 
.main > div { 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="label">label1</div> 
 
    <div class="label">label2</div> 
 
    <div class="main"> 
 
    <div class="inner-one">inner-one</div> 
 
    <div class="inner-two">inner-two</div> 
 
    <div class="inner-three">inner-three</div> 
 
    </div> 
 
    <div class="label">label3</div> 
 
    <div class="label">label4</div> 
 
</div>