跟进帖子：“......为什么没有”对齐项目“和”自我辩护“属性？”

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 可以定位为绝对，但在这里我决定使用伪来匹配它，因此它会更具响应性。

使这项工作的原因是伪匹配 56 的高度，因此 55 将在其父级的中间居中。

Stack snippet

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您也可以使用边距来实现此目的，以避免在container

上设置高度

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;