如何在它们之间没有空格的情况下定位弹性项目

Question

我目前有 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>

Answer 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>

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

当您将 margin-left: auto 应用到两个项目时，它们会平分可用的 space。结果，有差距。

只需将边距应用到第二个项目，因此它会消耗所有空闲 space，将其自身及其同级固定在右侧。

更多信息在这里：

Answer 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>

如何在它们之间没有空格的情况下定位弹性项目

How to position flex items without spaces between them

html

css

alignment

flexbox