更改 CSS 弯曲方向

Question

是否可以将块的弯曲方向从一个块更改为另一个块？

我有一列使用 flex 的块（显然是垂直运行），但在这些块的中间块中，有三个较小的内部块需要水平运行 - 我已经尝试过 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>