如何使项目居中和右对齐

Question

.parent {
  display: flex;
  justify-content: flex-end;
  background-color: lightgray;
}

.child {
  width: 200px;
  height: 200px;
  background-color: gray;
  border: solid black 1px;
}

.center {
  margin: 0 auto;
  background-color: black
}

<div class="parent">
  <div class="child center"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
</div>

这是我得到的内容。

看起来黑色的那个位于父元素的稍微左边，而不是“中心”。 我该如何修复它？

- YO Y

---

在屏幕空间有限的较小屏幕上，您是否希望这三个元素仍然堆叠在一起？ - Yong

Answer 1

如果您不介意使用 grid 而不是 flexbox，则可以使用属性 justify-self 以帮助使用 position: absolute; 将黑色框对齐到中心位置。此处的绝对定位使得可以将黑色框向中心对齐，而不会影响其他两个框。请参见以下代码段：

.parent {
  display: grid;
  justify-content: flex-end;
  grid-auto-flow: column;
  background-color: lightgray;
  position: relative;
}

.child {
  width: 200px;
  height: 200px;
  background-color: gray;
  border: solid black 1px;
}

.center {
  background-color: black;
  justify-self: center;
  position: absolute;
}

@media screen and (max-width: 992px) {
  .parent{
    display: flex;
    flex-wrap: wrap;
  }
  .center {
    position: relative;
  }
}

<div class="parent">
  <div class="child center"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
</div>

PS. 我已经添加了一个 @media 查询，以防您希望在较小的空间/屏幕上将3个框叠放。

编辑: 在较小的屏幕上更改显示并使用 flex-wrap 进行必要的换行。

关于 justify-self 和 grid 的更多信息，可以分别参考这里和这里。

- Yong

---

谢谢，它有效！当屏幕缩小时，我也可以将黑色和灰色的包裹起来吗？就像在父元素上使用flex-wrap: wrap一样。 - YO Y

@YOY编辑了代码片段以启用换行。您可以在上面检查更改。 - Yong

这正是我想要的。你在@media查询中添加了display:flex; flex-wrap:wrap;。再次感谢你的分享！ - YO Y