在 CSS Flexbox 中排列元素 [重复]

Question

我有一个这样的 HTML 标记结构：

<div class="container>
     <div id="one"></div>
     <div id="two"></div>
     <div id="three"></div>
</div>

我正在尝试将此标记塑造成显示 flex 行。其中 div 一占据线宽的一半，其余的 div 占据线宽的另一半，但彼此堆叠在与 div 一相同的行中。

我意识到我可能应该将 div 2 和 3 包装在一个 div 中，然后执行我正在寻找的设计。我只是想知道是否可以在不将 div 2 和 3 包装在另一个 div 中的情况下这样做。

谢谢！

Answer 1

你必须用另一个 div 来包装它们，一个简单的例子就是给你的容器： .container { display: flex; flex-direction: row; }

然后，你为两个和三个制作一个包装器，然后给他：
.wrapper { display: flex; flex-direction: column; }

这是最基本的东西，当然你需要修改其他的东西。