Flexbox 列垂直对齐顶部的子项和列中心的子项答案

【问题标题】：Flexbox column vertical align a child at the top and a child at the center of the columnFlexbox 列垂直对齐顶部的子项和列中心的子项
【发布时间】：2018-06-23 05:54:33
【问题描述】：

目前我正在为 flexbox 列苦苦挣扎。检查了很多网站，但在互联网上仍然没有找到解决此问题的方法。

案例：在我的视口右侧，我有一个全高的 flex 列，包含 2 个元素（请参阅耳机图标和挂断按钮）。我使用 flex-column 垂直对齐我的元素。第一个元素应该在右上角，第二个元素应该在右上角。由于它是一个 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>

我想要的样子：

【问题讨论】：

stackoverflow.com/q/36191516/3597276
这看起来不像我描述的问题
请出示您的代码
代码已添加

标签： css flexbox bootstrap-4

【解决方案1】：

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

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

首先想到的是简单地将右列的高度设置为 50%（+ 要居中的按钮高度的一半）
```
.right-controls {
  height: calc(50% + /half the height of your button/);
}
```
第二种可能也是最简单的解决方案是简单地将自动边距（顶部和底部）添加到目标按钮。这样，您就不必担心计算：
```
.dismiss-call {
  margin: auto 0;
}
```

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

【讨论】：