css flex - Третий столбец отображается под вторым столбцом.

Question

Я использовал flex для разметки и обнаружил странные проблемы. Когда окно уменьшается на 800, третий модуль должен находиться под вторым модулем

.flex-box {
  display: flex;
  height: 200px;
  width: 100%;
  background: red;
}

.left {
  width: 300px;
  min-width: 300px;
  height: 100vh;
  flex-shrink: 1;
  background: yellow;
}

.center {
  width: 100%;
  height: 100%;
  min-width: 900px;
  flex-shrink: 2;
  background: red;
}

.right {
  width: 140px;
  height: 200px;
  background: yellow;
}

<div class="flex-box">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>

окно 800px, я хочу это ：

    <style>
        @media screen and (max-width:800px){
           .right{
             ....
           }
        }
    </style>

Пожалуйста, помогите мне с этим ~ Я не знаю, как это работает

Answer 1

Для этого не нужно float и менять HTML.

Вы can делаете это только через CSS, вы можете изменить направление своего гибкого бокса на столбец вместо строки.

Но лично я бы подумал, возможно, использовать сетку здесь для основного макета. Он чище и значительно упрощает настройку областей.

.flex-box {
  display: flex;
  height: 200px;
  width: 100%;
  background: red;
}

.left {
  width: 300px;
  min-width: 300px;
  height: 100vh;
  flex-shrink: 1;
  background: yellow;
}

.center {
  width: 100%;
  height: 100%;
  min-width: 900px;
  flex-shrink: 2;
  background: red;
}

.right {
  width: 140px;
  height: 200px;
  background: yellow;
}

@media (max-width: 800px) {
  .flex-box {
    flex-flow: column;
    flex-wrap: wrap;
  }
  
  .left {
   height: 100%;
  }
  
  .center,
  .right{
    height: 50%;
    }
}

<div class="flex-box">
  <div class="left">
    left
  </div>
  <div class="center">
    center
  </div>
  <div class="right">
    right
  </div>
</div>