CSS-Flex-Richtung ändern

Question

Ist es möglich, die Flex-Richtung von Blöcken von einem Block zum nächsten zu ändern?

Ich habe eine Spalte von Blöcken (natürlich vertikal) mit flex, aber im mittleren Block, von diesen Blöcken gibt es drei kleinere innere Blöcke, die horizontal laufen müssen - und ich habe versucht display: inline-block, und Setzen ihrer Eltern auf display: flex; flex-direction: row. Ich habe versucht, sie zu setzen flex: 0 und flex: none, aber sie immer noch in einer Spalte angezeigt.

vorstellen, also diese Struktur:

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) 

Wie kann ich ihre Eltern machen Anzeige vertikal und füllen Sie den vertikalen Platzangebot, während diese drei inneren Blöcke horizontal angezeigt werden mit editierbaren Breiten?

Answer 1

ich die Struktur vorgestellt und ist hier, was Sie tun können:

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