Html 我怎样才能把弹性物品放在最后？

我希望弹性项目在中间，只有最后一个项目在末尾，但当我使用

左边距：auto

时，其他项目则放在开头

#容器{
背景色：小麦；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.项目{
背景颜色：蓟；
保证金：5px；
填充：10px；
}
.项目：最后一个孩子{
左边距：自动；
}

1.
2.
3.
4.
5.

我希望我能帮助你

这样做怎么样

#容器{
背景色：小麦；
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
}
.项目{
背景颜色：蓟；
保证金：5px；
填充：10px；
}
.项目：最后一个孩子{
位置：绝对位置；
右：0px；
}

我使用绝对位置来表示要放在末尾的元素。我为父容器添加了位置相对属性，这样最后一个元素仍然在父容器中。

我希望我能帮助您

这样做怎么样

#容器{
背景色：小麦；
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
}
.项目{
背景颜色：蓟；
保证金：5px；
填充：10px；
}
.项目：最后一个孩子{
位置：绝对位置；
右：0px；
}

---

我使用绝对位置来表示要放在末尾的元素。我向父容器添加了position-relative属性，这样最后一个元素仍然在父容器中。

您在最后一个flex项上使用

左边距：auto

是正确的。这是将最后一个项目定位在主轴末端的一种方法。要使其他弹性项保持在中间位置，只需给第一个弹性项

。项：第一个子项

一个带有

左边距：自动

的自动左边距。现在，项目1、2、3、4在导航栏中居中，数字5（最后一项）位于行的末尾

#容器{
背景色：小麦；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.项目{
背景颜色：蓟；
保证金：5px；
填充：10px；
}
.项目：第一个孩子{
左边距：自动；
}
.项目：最后一个孩子{
左边距：自动；
}

1.
2.
3.
4.
5.

您在最后一个flex项目上使用了

左边距：auto

，这是正确的。这是将最后一个项目定位在主轴末端的一种方法。要使其他弹性项保持在中间位置，只需给第一个弹性项

。项：第一个子项

一个带有

左边距：自动

的自动左边距。现在，项目1、2、3、4在导航栏中居中，数字5（最后一项）位于行的末尾

#容器{
背景色：小麦；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.项目{
背景颜色：蓟；
保证金：5px；
填充：10px；
}
.项目：第一个孩子{
左边距：自动；
}
.项目：最后一个孩子{
左边距：自动；
}

1.
2.
3.
4.
5.

#容器{
背景色：小麦；
显示器：flex；
}
.项目{
背景颜色：蓟；
保证金：5px；
填充：10px；
}
.项目：第一个孩子{
左边距：自动；
}
.项目：最后一个孩子{
左边距：自动；
}

1.
2.
3.
4.
5.

#容器{
背景色：小麦；
显示器：flex；
}
.项目{
背景颜色：蓟；
保证金：5px；
填充：10px；
}
.项目：第一个孩子{
左边距：自动；
}
.项目：最后一个孩子{
左边距：自动；
}

1.
2.
3.
4.
5.

如果需要以下结果

首先，下面的解决方案会起作用

.container {
  background-color: wheat;
  width: 10rem;
  height: 5rem;
  margin-top: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.item {
  width: 2rem;
  height: 2rem;
  background-color: thistle;
  border: 0.1rem solid gray;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item:nth-child(5) {
  position: absolute;
  top: 50%;
  left: 95%;
  transform: translateY(-50%);
}

在上面的代码中，我对第5项使用了

绝对定位

，这样它就脱离了文档的正常流程，我们可以使用

顶部

、

左侧

、

右侧

和

底部

属性对其进行定位。确保将

position:relative

添加到父容器中

我使用

transform:translateY（-50%）

将第5项居中放置在容器的中心。您可以通过更改

left

属性来决定要将第五个元素放置在离左侧多远的位置

---

原因是

左边距：auto

不起作用，因为当您使用它时，第五个项目在其左边占据尽可能多的空间，因此其余4个项目会被推到容器的左边/开头。

如果您希望得到以下结果

首先，下面的解决方案会起作用

.container {
  background-color: wheat;
  width: 10rem;
  height: 5rem;
  margin-top: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.item {
  width: 2rem;
  height: 2rem;
  background-color: thistle;
  border: 0.1rem solid gray;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item:nth-child(5) {
  position: absolute;
  top: 50%;
  left: 95%;
  transform: translateY(-50%);
}

在上面的代码中，我对第5项使用了

绝对定位

，这样它就脱离了文档的正常流程，我们可以使用

顶部

、

左侧

、

右侧

和

底部

属性对其进行定位。确保将

position:relative

添加到父容器中

我使用

transform:translateY（-50%）

将第5项居中放置在容器的中心。您可以通过更改

left

属性来决定要将第五个元素放置在离左侧多远的位置

---

原因是

margin left:auto

不起作用，因为当您使用它时，第5个项目会向其左侧占用尽可能多的空间，因此其余4个项目会被推到容器的左侧/开头。

您可以简单地将

margin left:auto

添加到第一个元素，从而使其保持“固定”在某种意义上，如果你可以的话。您可以为它创建一个新类，或者只需为它使用

第一个子类

#容器{
背景色：小麦；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.项目{
背景颜色：蓟；
保证金：5px；
填充：10px；
}
.项目：第一个孩子{
左边距：自动；
}
.项目：最后一个孩子{
左边距：自动；
}

1.
2.
3.
4.
5.

您可以