Flexbox列垂直对齐一个孩子在顶部和一个孩子在中心

Question

目前，我正在努力处理flexbox列。检查了这么多的网站，但仍然找不到在互联网上解决此问题的解决方案。

情况： 在视口的右侧，我有一个全高的flex-column，包含2个元素（请参阅耳机图标和挂断按钮）。我使用flex-column垂直对齐我的元素。 第一个元素应该在右上角，第二个元素应该在右中角。 由于它是一个弹性列，因此我不能在第二个元素上使用align-self-center，因为它将以x轴而不是y轴为中心。

我想知道是否仅使用flexbox即可解决此问题，或者是否需要以其他方式放置此居中元素？

我正在使用bootstrap 4 flex类来应用flexbox。

代码示例：https://jsfiddle.net/mv1e7py0/18/

<div class="flex-container flex-column main-containere video-container">
  <div class="communication-controls d-flex justify-content-between">
    <div class="left-controls d-flex flex-column justify-content-between">
      <button class="chat-toggle">
        Chat
        <div class="indicator bg-red"></div>
      </button>

      <button class="mic-toggle">
        Mic
      </button>
    </div>

    <div class="right-controls d-flex flex-column justify-content-between">
      <button class="speaker-toggle">
        Headset
      </button>

      <button class="dismiss-call red align-self-center">
        <span>Hang up</span>
      </button>
    </div>
  </div>
</div>

我希望它看起来像什么

Answer 1

@ miranda-breekweg这里有2个快速解决方案，希望对您有所帮助：

在两种情况下，我们都将justify-content设置为space-between。

1. 首先想到的是将右列的高度简单地设置为50％（+您要居中的按钮的高度的一半）

   .right-controls {
     height: calc(50% + /half the height of your button/);
   }
   

2. 第二种也是最简单的解决方案是将自动页边距（顶部和底部）添加到目标按钮。这样，您不必担心计算：

   .dismiss-call {
     margin: auto 0;
   }
   

提琴： https://jsfiddle.net/mv1e7py0/39/