Question

我正在尝试创建具有两个不同区域的flex容器。左侧将有2个伸缩框彼此叠放，而右侧（第一个框）将是另一个伸缩容器，其中有多个呈列形式的框。目前，当我创建它时，它们全部都被推到了角落，看起来像这样。

.practice-flex-container {
  display: flex;
}

.practice-flex-container div {
  border: 1px #ccc solid;
  padding: 10px
}

.practice-left-flex-container {
  flex-direction: column;
}

.practice-right-flex-container {
  flex-direction: row;
}

.left-box {
  flex: 1;
}

.box-3 {
  flex: 1;
}

<div class="practice-flex-container">
  <div class="practice-left-flex-container">
    <div class="left-box">
      <h3>Search Here</h3>
      <p>_________</p>
    </div>
    <div class="left-box">
      <h3>Overall Stats: </h3>
      <p>Rewards: 127378</p>
      <p>Deposits: 127838</p>
    </div>
  </div>
  <div class="practice-right-flex-container">
    <div class="box-3">
      <h3>Box One</h3>
      <p>hello</p>
    </div>
  </div>
</div>

Answer 1

这是您需要知道的。 display:flex;使其子元素自动成为其灵活布局的一部分。 display:flex;的子代应具有flex:auto;，以自动占用display:flex;父代中的可用空间。对于将家长设置为flex-direction:row;的孩子，display:flex;是默认方向。要覆盖此设置，您需要设置flex-direction:column;。

在嵌套元素时要牢记，嵌套元素的父项需要display:flex;才能使其子级成为其灵活布局的一部分。

经过研究后，我认为这是您想要的：

.practice-flex-container{
  box-sizing:border-box; display:flex;
}
.practice-flex-container div{
  border:1px #ccc solid; padding:10px
}
.practice-flex-container>div{
  flex:auto; flex-direction:column; display:flex;
}
.practice-flex-container>div>div{
  flex:auto;
}
.practice-flex-container>div>div>div{
  display:flex;
}
.practice-flex-container>div>div>div>div{
  flex:auto; color:red;
}

<div class="practice-flex-container">
  <div class="practice-left-flex-container">
    <div class="left-box">
      <h3>Search Here</h3>
      <p>_________</p>
    </div>
    <div class="left-box">
      <h3>Overall Stats: </h3>
      <p>Rewards: 127378</p>
      <p>Deposits: 127838</p>
    </div>
  </div>
  <div class="practice-right-flex-container">
    <div class="box-3">
      <h3>Box One</h3>
      <p>hello</p>
      <div>more stuff here</div>
      <div>more stuff here</div>
      <div>more stuff here</div>
      <div>more stuff here</div>
      <div>more stuff here</div>
      <div>more stuff here</div>
      <div>more stuff here</div>
      <div>
        <div>stuff</div>
        <div>stuff</div>
        <div>stuff</div>
      </div>
    </div>
  </div>
</div>

有一排伸缩容器，它们的方向不同

1 个答案: