更改CSS弯曲方向

Question

是否可以将块之间的弯曲方向从一个块更改为另一个块？我有一列块（显然是垂直运行，使用flex），但在这些块的中间块中，有三个较小的内块需要水平运行 - 我试过display: inline-block，并且尝试了display: inline-block，并且尝试了display: inline-block，并且尝试了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>