Изменить направление флекс 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>