Html Flexbox：如何使元素粘附到其容器的右端？

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

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

这就是我得到的：

你知道什么能让右边的小正方形粘在右边吗

请看我写的代码：

.big{
显示器：flex；
宽度：40vw；
高度：10vw；
边框：实心；
弯曲方向：行；
}
.小右，
.小左{
宽度：5vw；
高度：5vw；
边框：实心；
}
.小右{
对齐项目：柔性端；
}

---

您有很多选择。以下是三点：

• 在flex容器中添加

  justify content:

• 将

  margin right:auto

  添加到第一个弹性项，或
• 将

  左边距：auto

  添加到第二个弹性项

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

您可以使用边距：

.big{
显示器：flex；
宽度：40vw；
高度：10vw；
边框：实心；
弯曲方向：行；
}
.小右，
.小左{
宽度：5vw；
高度：5vw；
边框：实心；
}
.小右{
页边顶部：自动；
左边距：自动；
}

---

试试这个

将对齐内容：主分区之间的空格添加到主分区。删除--页边距顶部：自动来自右小班

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

.大{
显示器：flex；
宽度：40vw；
高度：10vw；
边框：实心；
证明内容：之间的空间；
}
.小右，
.小左{
宽度：5vw；
高度：5vw；
边框：实心；
}

我试图制作一个响应表单，其中s滑到标签下方，但保持向右齐平。我提出了以下解决方案（基于@G-Cyr的回答）：