Flexbox：如何使元素粘在其容器的右端？

Question

我的意图是有一个大广场，里面有两个小方块。

一个正方形（小左）应该贴在大正方形的左端，另一个（小右）应该贴在右端。

这就是我得到的：

你知道什么可以使右小方块向右移动吗？

请查看我写的代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您还可以在Code-Pen中查看代码：https://codepen.io/CrazySynthax/pen/OmMxQw

Answer 1

你有很多选择。这是三个：

• 将justify-content: space-between添加到Flex容器，或
• 将margin-right: auto添加到第一个弹性项目，或者
• 将margin-left: auto添加到第二个弹性项目。

以下是对每个属性如何运作的解释：

• Methods for Aligning Flex Items along the Main Axis

Answer 2

您可以使用保证金：

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

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

.small-right {
  margin-top: auto;
  margin-left: auto;
}

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

https://codepen.io/gc-nomade/pen/zwrEXo

Answer 3

试试这个

将 justify-content：space-between 添加到主div。删除 - margin-top：auto; 来自小右派。

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



   .big {
      display: flex;
      width: 40vw;
      height: 10vw;
      border: solid;
      justify-content: space-between;
    }

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