html - 跟进帖子: "...why are there no “justify-items” and “justify-self” properties?“

Question

跟进问题:In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

有人能帮我把方框 55 和 56 [来自最佳答案] 合并起来吗？

这就是我要找的

<div class="container">
  <div class="centered">
    55
  </div>
  <div class="bottomright">
    56
  </div>
</div>

一整天都在挣扎，我放弃了!在此先感谢您的帮助。

Answer 1

有不止一种方法可以实现这一点，即 56 可以绝对定位，但在这里我决定使用伪来匹配它，这样它会更有响应。 p>

这项工作的成功之处在于伪匹配 56 的高度，因此 55 将在其父项的中间居中。

堆栈片段

.container {
  display: flex;
  flex-direction: column;           /*  flow vertically  */
  justify-content: space-between;   /*  create a gap between items  */
  height: 200px;
  align-items: center;
  background: yellow;
}

.container .centered {
  width: 90%;
  height: 80px;
  background: lime;
}

.container .bottomright {
  width: 20%;
  background: lime;
  align-self: flex-end;             /*  align right  */
}

.container::before,
.container .bottomright {
  content: '';
  height: 40px;
}

/* extra styling, make text centered  */
.container .centered,
.container .bottomright {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="centered">
    55
  </div>
  <div class="bottomright">
    56
  </div>
</div>

---

您也可以使用边距来实现这一点，以避免在 container

上设置高度

.container {
  display: flex;
  flex-direction: column;           /*  flow vertically  */
  align-items: center;
  background: yellow;
}

.container .centered {
  width: 90%;
  height: 80px;
  margin: 30px 0;                   /*  top/bottom margin  */
  background: lime;
}

.container .bottomright {
  width: 20%;
  background: lime;
  align-self: flex-end;             /*  align right  */
}

.container::before,
.container .bottomright {
  content: '';
  height: 40px;
}

/* extra styling, make text centered  */
.container .centered,
.container .bottomright {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="centered">
    55
  </div>
  <div class="bottomright">
    56
  </div>
</div>