Question

我目前有3件物品。我想要第一个项目左对齐，最后两个右对齐彼此相邻。我似乎无法使中间框向右移动。证明自我的属性有些令人困惑，因此我在这里发表了我的问题。这是我的代码。

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

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

当您将margin-left: auto应用于两个项目时，它们将均分可用空间。结果，存在差距。

只需将边距应用于第二个项目，这样它将消耗所有可用空间，将自身及其同级都固定在右侧。

此处有更多信息：Methods for Aligning Flex Items along the Main Axis

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>

如何放置弹性项目之间没有空格

2 个答案: