左右对齐两个项目的最佳方法是什么？

Question

下面给出的图像是我正在寻找的结果。

所以我的html如下

    <div class="container">
      <div class="content1">1</div>
      <div class="content2">2</div>
      <div class="content3">3</div>
    </div>

此处容器设置为display: flex 我想按如下所示对齐div。 我可以给justify-content: space-between 但是如何将中心div对齐到3，且距其10px的距离

我有几个排成一行的容器。因此，最后，它应如下图所示

我已将margin-left赋予了div 2，但对于宽度不同的div却无法正确排序

Answer 1

您可以在右侧的2周围添加另一个div，然后使用margin在所有div周围创建空间

.container{
display:flex;
justify-content: space-between;
background: grey;
width: 400px;
height: 400px;
}
.content1,
.content2,
.content3{
background: green;
width: 50px;
height: 50px;
margin: 10px;
}
.align{
display:flex;
}

<div class="container">
      <div class="content1">1</div>
      <div class="align">
        <div class="content2">2</div>
        <div class="content3">3</div>
      <div>
    </div>