html - 将中心和右侧与 flex 对齐？

Question

我正在尝试水平居中对齐 group1 并右对齐 group2 与 flex。

<div class="holder">
    <div class="group1">
        ...
    </div>
    <div class="group2">
        ...
    </div>
</div>

CSS:

.holder{
    display: flex;
    justify-content:center;
}
.group2{
    align-self: flex-end;
}

但是一切都只是居中，有什么解决办法吗？

Answer 1

由于 flexbox 是建立在对边距的操作之上的，因此除了使用 position:absolute 之外，没有其他方法可以将一项移出流。

任何其他方法都会使中心元素受到其他元素的影响。

.holder {
  display: flex;
  justify-content: center;
  border: 1px solid grey;
  position: relative;
}
.group1 {
  background: plum;
}
.group2 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid red;
}

<div class="holder">
  <div class="group1">
    Group 1
  </div>
  <div class="group2">
    Group 2
  </div>
</div>