Question

我使用flexboxes构建了一个html页面。有1个主要的弹性容器，它有2个侧面 - 分别是左侧和右侧。现在我需要在这些顶部添加另一个div，如下所示：

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

＆＃13;

.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;		
}

＆＃13;

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

＆＃13;

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

Answer 1

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

左/右包装器获取row方向（默认），主容器获得column。

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

Stack snippet

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

您只需要为容器设置display: flex属性。

使用flex: 100%作为首要项目
左右项目的用户flex: 1

Answer 3

您可以将flex-grow: 1用于div header_switch。

Answer 4

enter image description here试试这个

.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属性，该属性表示它将使用窗口中的所有可用空间。进一步主要包含两个视图，左右一个也有属性flex：1将主要分为主。

如何使用flexbox将div放在另一个顶部

4 个答案: