如何在中心和右侧对齐项目

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>

这就是我得到的。

黑色的好像在左边一点，不是父级的“中心”。我该如何解决这个问题？

Answer 1

如果你不介意使用grid而不是flexbox，你可以使用属性 justify-self帮助将黑框居中对齐position: absolute; 个。这里的绝对定位使得黑框可以在没有 minding/affecting 其他两个框的情况下向中心对齐。请参阅下面的代码段：

.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 个盒子堆叠在较小的 space/screen.

上

编辑：使用 flex-wrap.

更改了小屏幕上的显示并在必要时应用换行

更多关于 justify-self 和 grid here and here。

如何在中心和右侧对齐项目

how to align items in the center and right

css

grid

flexbox