html - 在Flexbox布局中的小屏幕上看不到页脚

Question

更改页面宽度后，页脚消失了。

我希望页面缩小后能以列显示。我的页脚不在容器中，因为当我将其设置为容器时，它位于容器中第四个元素的右边。我不知道如何放置在正确的位置（页面底部）。

码

.container > *{
  padding: 10px;
  flex: 1
}
.container{
  display: flex;
  height: 400px;
}

@media screen and (max-width: 800px) {
.container{
  flex-direction: column;
}
}

<div class="header">
</div>
<div class="container">
      <div class="lol first"> 
          <div class="list">
          </div>
      </div>
       <div class="lol second"> 
       </div>
        <div class="lol third"> 
        </div>
         <div class="lol fourth">
         </div>
</div>
      <div class="footer">  
      </div>
</div>

Answer 1

您可以在.lol而非容器上放置高度：

.container{
  display: flex;
  flex-wrap: ;
}
.lol {
  height: 400px;
}

https://codepen.io/jfitzsimmons/pen/gOYBdrq