如何以正确的方式对齐我的弹性盒项目？

Question

我正在尝试找出如何对齐我的弹性盒项目。我不确定这是否可能，所以我才问。这是我的代码：我的CSS：

.container {width: 100%; display: flex; position: relative;}

.item {display: flex;}

.one {width: 65%;}

.two {width: 35%;}

和html：

<div class="container>

<div class="item one"></div>

<div class="item one"></div>

<div class="item one"></div>

<div class="item two"></div>

<div class="item two"></div>

</div>

我想让它像这样：

Answer 1

你想要flex-direction: column和flex-wrap:wrap。然后给你的物品高度，以便它们垂直包裹在容器内：html,body{height:100%;}.container {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; flex-wrap: wrap;&nbsp; border: solid 2px orangered;&nbsp; width: 50%;&nbsp; height: 60%;&nbsp; box-sizing:border-box;}.item {&nbsp; &nbsp; box-sizing:border-box;&nbsp; &nbsp; margin: 2px;}.one {&nbsp; height: calc(33% - 4px);&nbsp; border: solid 2px green;&nbsp; width: calc(65% - 4px);}.two {&nbsp; height: 40%;&nbsp; border: solid 2px orange;&nbsp; width: calc(35% - 4px);}<div class="container">&nbsp; <div class=" item one ">one</div>&nbsp; <div class="item one ">one</div>&nbsp; <div class="item one ">one</div>&nbsp; <div class="item two ">two</div>&nbsp; <div class="item two ">two</div></div>

Answer 2

在这里您可以找到 Flexbox 工作原理的快速示例。如果您是初学者，这非常有用。