如何定位弹性项目，它们之间没有空格[重复]答案

【问题标题】：How to position flex items without spaces between them [duplicate]如何定位弹性项目，它们之间没有空格[重复]
【发布时间】：2020-10-16 05:31:29
【问题描述】：

我目前有 3 件商品。我希望第一项左对齐和最后两项右对齐彼此相邻。我似乎无法使中间框向右移动。 justify self 属性有点令人困惑，所以我在这里发布了我的问题。这是我的代码。

.box {
  display: flex;
}

.box1 {
  width: 200px;
  height: 100px;
}

.box2 {
  width: 100px;
  height: 100px;
  margin-left: auto;
}

.box3 {
  width: 100px;
  height: 100px;
  margin-left: auto;
}

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

【问题讨论】：

标签： html css flexbox alignment

【解决方案1】：

您不需要在最后一项上设置自动边距。

.box {
  display: flex;
}

.box2 {
  margin-left: auto;
}

.box3 {
  /* margin-left: auto; */
}

.box > div {
  flex: 0 0 100px;
  height: 100px;
  border: 1px solid black;
}

<div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

自动边距消耗指定方向上的所有可用空间。

当您将margin-left: auto 应用于两个项目时，它们会在它们之间平均分配可用空间。因此，存在差距。

只需将边距应用于第二个项目，因此它会占用所有可用空间，并将其自身及其同级固定在右侧。

更多信息在这里：Methods for Aligning Flex Items along the Main Axis

【讨论】：

【解决方案2】：

.box {
  display: flex;
}

.box1 {
  width: 200px;
  height: 100px;
  background-color:red;

}
.box2 {
  width: 100px;
  height: 100px;
margin-left:auto;
background-color:blue;
}
.box3 {
  width: 100px;
  height: 100px;
margin-right: 0;
background-color:yellow;
}

<div class="box">
  <div class ="box1">box1</div>
<div class ="box2">box2</div>
<div class ="box3">box3</div>
</div>

【讨论】：