Css Flexbox布局未按预期工作

我有这个HTML

<div class="flex-container">
    <div class="flex-full">1</div>
</div>

<div class="flex-container">
    <div class="flex">2</div>
    <div class="flex">3</div>
    <div class="flex">4</div>
</div>

但结果并不像预期的那样。我将尝试对问题进行可视化演示（上传图像无效）：

在屏幕宽度320px及以下，我得到以下结果

    111111111111111
    222222233333333
    444444444444444

我所期望的是：

    phone screen          bigger screen
    111111111111111       111111111111111111
    222222222222222       222222333333444444
    333333333333333
    444444444444444

我希望这是有意义的，请帮助我：）

---

您是否正在寻找

弹性方向：列

在.flex容器上。
在flex中，您可以分别使用
justify content
和
align content
进行水平和垂直对齐

另外，
flex basis
采用与宽度和高度属性相同的值，并在根据弹性系数分配自由空间之前指定弹性项的初始主尺寸

.flex-container {
  flex-direction:         row;
  justify-content:        space-between;
  align-content:          space-between;
}

.flex1, .flex4{
  flex-basis:             100%;
}

.flex2, .flex3{
  flex-basis:             50%;
}

@media screen and (max-width: 320px){

  .flex2, .flex3{
    flex-basis:             100%;
  }

}

如果
flex basis
不，您也可以使用
width:100%
和
width:50%
来代替。我希望第一行（11111）总是填满空间，第二行（222333444）要么相邻，要么在彼此的顶部，永远不要分成两行和一行。我已经编辑以澄清我的目标，我希望.flex具有相同的CSSSo。答案有什么问题？首先，我觉得在媒体查询中更改flex属性与flexbox的使用背道而驰。第二，flex 2、3和4不在一起时应该在同一行上。对于第二个div flex容器，您可以为手机使用flexDirection列（最大宽度：480px），为更大的屏幕使用flexDirection行？
.flex-container {
  flex-direction:         row;
  justify-content:        space-between;
  align-content:          space-between;
}

.flex1, .flex4{
  flex-basis:             100%;
}

.flex2, .flex3{
  flex-basis:             50%;
}

@media screen and (max-width: 320px){

  .flex2, .flex3{
    flex-basis:             100%;
  }

}