如何使用flexbox將div置於另一個之上

Question

我已經使用flexboxes建立了一個html頁面。 有1個主要的flex-container，它有2個側面-分別是左側和右側。 現在，我也需要在這些元素的頂部放置另一個div，如下所示：

FlexContainer是這三個孩子的主要班級。 我遇到的問題是無法使它像這樣工作。 我知道如何通過相對定位來做到這一點，但是我不喜歡這種方式。 我當前的頁面如下所示：

 .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 。

與使用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> 

Answer 2

 .flex-container { width: auto; height: 100%; display: flex; flex-flow: row wrap; } .flex-container div { padding-top:30px; border: 2px solid #05788D; } .top{ flex: 100%; } .leftSide { flex: 1; } .rightSide { flex: 1; } 

 <div class="flex-container"> <div class="top"> top </div> <div class="leftSide"> left </div> <div class="rightSide"> right </div> </div> 

您只需要為容器設置display: flex屬性。

1. 使用flex: 100%用於頂級商品
2. 用戶flex: 1用於左右項目

Answer 3

您可以將flex-grow: 1用於div header_switch 。

Answer 4

在這里輸入圖片說明

.container {
      display: flex;
      flex-direction: column;
      height:100%;
      margin: 0px;
    }
    .header {
      height: 70px;
      flex:1;
      background-color: #aaa;
    }
    .main {
      flex:1;
      display: flex;
      height:100vh;
      background-color: #aaa;
      flex-direction: row;
    }

    .child-right {
      flex:1;
      background: blue;
    }
    .child-left {
      flex:1;
      background: red;
    }

然后在HTML中將div這些類包裝起來

<div class="container">
    <div class="header"></div>
    <div class="main">
      <div class="child-left"></div>
      <div class="child-right"></div>
    </div>
  </div>

我將很樂意對此進行解釋。 在這里，我們創建了一個容器div，它本身就是flex並使用視圖的整個高度和寬度。 現在，我們創建它的兩個孩子，一個用於標題，另一個是主視圖。 標頭視圖具有固定高度，主視圖具有flex：1屬性，該屬性指示它將使用窗口中的所有可用空間。 進一步的main包含兩個視圖，左一個和右一個也具有屬性flex：1，這兩個視圖將在main中將自己平均分配。