html - Flexbox:如何让一个元素粘在容器的右端？

Question

我的意图是有一个大正方形，里面有两个小正方形。

一个正方形(小左)应该粘在大正方形的左端，另一个(小右)应该粘在大正方形的右端。

这是我得到的:

你知道什么可以让右边的小方 block 粘在右边吗？

请看我写的代码:

.big {
  display: flex;
  width: 40vw;
  height: 10vw;
  border: solid;
  flex-direction: row;
}

.small-right,
.small-left {
  width: 5vw;
  height: 5vw;
  border: solid;
}

.small-right {
  align-items: flex-end;
}

<div class="big">
  <div class="small-left"></div>
  <div class="small-right"></div>
</div>

也可以在Code-Pen中看到代码:https://codepen.io/CrazySynthax/pen/OmMxQw

Answer 1

您有多种选择。这是三个:

• 将 justify-content: space-between 添加到 flex 容器，或者
• 将 margin-right: auto 添加到第一个 flex 元素，或者
• 将 margin-left: auto 添加到第二个 flex 元素。

以下是对每个属性如何工作的解释:

• Methods for Aligning Flex Items along the Main Axis