html - 如何使用 flexbox 将一个 div 放在另一个之上

Question

我已经使用 flexboxes 构建了一个 html 页面。有 1 个主 flex 容器，它有 2 个侧面——分别是左侧和右侧。现在我也需要在这些顶部放置另一个 div，如下所示:

FlexContainer 是这 3 个 child 的主要类。我遇到的问题是无法让它像这样工作。虽然我知道如何使用相对定位来做到这一点，但我不喜欢这种方式。我的当前页面如下所示:

.flex-container 
{
  width: auto;
  height: 100%;
  display: flex;
}

.leftSide 
{
  padding-top:30px;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow:auto;
  width: 50%;
  height: auto;
  border: 2px solid #05788D;
}

.rightSide
{
  padding-top:30px;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%; 
  overflow:auto;
  width: 50%;
  height: auto;
  border: 2px solid #05788D;
  border-left-style: none;		
}

<div class="flex-container">

<div class="leftSide">

</div>

<div class="rightSide">

</div>

</div>

如何将 header_switch 置于图中所示的顶部位置？

Answer 1

你包裹左/右，然后添加一个顶部元素。

左/右包装器获取行方向(默认)，主容器获取列。

与使用 row 和简单地包装元素相比，包装器和 column 方向的主要区别在于，您将能够更好地动态控制填充剩余高度。

堆栈片段

body {
  margin: 0;
}

.flex-container {
  width: auto;
  height: 100vh;
  display: flex;
  flex-direction: column;        /*  added  */
}

.flex-container .middle {
  flex: 1;                       /*  added, fill remaining height  */
  display: flex;                 /*  added  */
}

.top {
  padding-top: 30px;
  border: 2px solid #05788D;
}

.leftSide {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow: auto;
  border: 2px solid #05788D;
}

.rightSide {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow: auto;
  border: 2px solid #05788D;
  border-left-style: none;
}

<div class="flex-container">

  <div class="top">
    top
  </div>

  <div class="middle">

    <div class="leftSide">
      left
    </div>

    <div class="rightSide">
      right
    </div>

  </div>

</div>