Flexbox column vertical align a child at the top and a child at the center of the column

Question

Currently I'm struggling with flexbox column. Checked so many websites, but still no solutions to be found on the internet for this problem.

The case: On the right side of my viewport I've got a full-height flex-column, containing 2 elements (see headset icon and hangup button). I used flex-column to vertically align my elements. The first element should be on the top right corner, the second element should be at the center right. Since it's a flex-column I can't use align-self-center on the second element, because it will be centering on the x-axis instead of the y-axis.

I was wondering if this is even solvable with just flexbox or if I need to position this centered element a different way?

I'm using the bootstrap 4 flex classes to apply flexbox.

Code example: 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>

What I want it to look like:

https://stackoverflow.com/q/36191516/3597276 – Michael Benjamin Jun 22 '18 at 11:31 — Michael Benjamin, Jun 22 '18 at 11:31
This doesn't look like the same issue as I'm describing – Miranda Breekweg Jun 22 '18 at 11:41 — Miranda Breekweg, Jun 22 '18 at 11:41
Show your code please – Nandita Sharma Jun 22 '18 at 12:22 — Nandita Sharma, Jun 22 '18 at 12:22
Code has been added – Miranda Breekweg Jun 22 '18 at 15:16 — Miranda Breekweg, Jun 22 '18 at 15:16

score 0 · Answer 1 · answered Jun 22 '18 at 21:54

@miranda-breekweg here are 2 quick solutions that I hope you'll find helpful:

In both cases we'll keep justify-content set to space-between.

the first thing that comes to mind is to simply set the height of the right column to 50% (+ half the height of that button you want to center)
```
.right-controls {
  height: calc(50% + /half the height of your button/);
}
```
the second and probably the easiest solution is to simply add auto margins (top and bottom) to the targeted button. This way, you don't have to worry about calculations:
```
.dismiss-call {
  margin: auto 0;
}
```

Fiddle: https://jsfiddle.net/mv1e7py0/39/

Flexbox column vertical align a child at the top and a child at the center of the column

1 Answers1