在一个容器中对齐 3 个 div（flex 列）[重复]

Question

我有一个div，它包含 3 个 div，在 flex-direction 列中。

有什么办法，我可以让底部的两个红色div，并排坐在一起（并排）。而且不是在彼此之上？像这样：

我知道我可以将这两个红色 div 存储在另一行并将方向设置为行。

但我想知道这是否可以实现，特别是使用这种 html 结构：

谢谢，

.main {
  display: flex;
  flex-direction: column;
  width: 200px;
  border: 1px solid black;
}

.top {
  background-color: blue;
  color: red;
  width: 100%;
  height: 50px;
}

.bottom {
  background-color: red;
  color: white;
  width: 50%;
  height: 50px;
}

    <div class="main">
      <div class="box top">Box 1</div>
      <div class="box bottom">Box 2</div>
      <div class="box bottom">Box 3</div>
    </div>

<div class="main">
  <div class="box top">Box 1</div>
  <div class="box bottom">Box 2</div>
  <div class="box bottom">Box 3</div>
</div>

Answer 1

您可以用display: flex 和flex-direction: row 将底盒包装在一个新容器中。由于您将主包装器作为 flex 列，因此无论其宽度如何，孩子们都会将自己对齐为一列。在这种情况下，您基本上是在给 main 一个子级，它将自己设置在列布局中，而列布局又具有将自己设置在行布局中的子级:)

.main {
  display: flex;
  flex-direction: column;
  width: 200px;
  border: 1px solid black;
}

.box-bottom-wrapper {
  display: flex;
  flex-direction: row;
}

.box-top {
  background-color: blue;
  color: red;
  width: 100%;
  height: 50px;
}

.box-bottom {
  background-color: red;
  color: white;
  width: 50%;
  height: 50px;
}

<div class="main">
      <div class="box-top">Box 1</div>
      <div class=box-bottom-wrapper>
        <div class="box-bottom">Box 2</div>
        <div class="box-bottom">Box 3</div>
       </div>
    </div>

Answer 2

验证这是否是您想要的。

我删除了方向并处理了flex 属性值。

我还将flex-wrap 属性添加到容器中。

flex-wrap 属性是灵活框布局模块的子属性。它定义了弹性项目是强制在单行还是可以流入多行

值定义：

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 0 1 100%;`

您可以阅读文档here。

.main {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  border: 1px solid black;
}

.top {
  flex: 0 1 100%;
  background-color: blue;
  color: red;
  height: 50px;
}

.bottom {
  flex: 1;
  background-color: red;
  color: white;
  height: 50px;
}

<div class="main">
      <div class="box top">Box 1</div>
      <div class="box bottom">Box 2</div>
      <div class="box bottom">Box 3</div>
    </div>