CSS: flexbox container with top & center aligned divs

Question

I am trying to create a layout with top and center aligned divs.

It does work, kinda: https://jsfiddle.net/zeo29uLa/

<div class="flexbox-container">
  <div class="top-item">
    top
  </div>
  <div class="center-item">
    center
  </div>
</div>

<style>
  body {
    height: 50vh;
  }
  .top-item {
    flex: 1 0 100%;
    text-align: center;
    align-self: flex-start;
  }
  .center-item {
    align-self: center;
  }
  .flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    justify-content: center;
    height: 100%;
    flex-wrap: wrap;
  }
</style>

My problem and thus question: how to precisely make the center div align at the center? Currently there is space above it <=> it aligns below the desired height

I have the feeling that this will be about correct usage of align-content in the parent container but I cannot seem to figure it out.

score 2 · Accepted Answer · answered Sep 21 '17 at 17:05

2

You can position the top-item as absolute and then add align-content: center to the flexbox container - see demo below:

  body {
    height: 50vh;
    background: blue;
  }
  .top-item {
    flex: 1 0 100%;
    text-align: center;
    align-self: flex-start;
    position: absolute; /* ADDED */
  }
  .center-item {
    align-self: center;
  }
  .flexbox-container {
    display: flex;
    background: green;
    justify-content: center;
    height: 100%;
    flex-wrap: wrap;
    align-content: center; /* ADDED */
    position: relative; /* ADDED */
  }

<div class="flexbox-container">
  <div class="top-item">
    top
  </div>
  <div class="center-item">
    center
  </div>
</div>

answered Sep 21 '17 at 17:05

kukkuz

41,512
6
59
95

1

Thanks for your solution! I am amazed how flawed this whole flexbox standard still is - this is an absolutely basic type of positioning and the bottom line is: it cannot be done with flexbox. Either you have to do it as shown by you or as show in the duplicate question and use hidden elements - wich is a really ugly hack imho. – B M Sep 21 '17 at 18:23
@BM, Actually, it's not really a flaw in flexbox. You just want flexbox to do something it isn't designed to do. Flexbox aligns items through the distribution of space in the container. When there is uneven space, the alignment will be uneven. It's that simple. – Michael Benjamin Sep 21 '17 at 19:17
If you're looking for a clean solution, then CSS Grid works nicely: https://jsfiddle.net/zeo29uLa/2/ – Michael Benjamin Sep 21 '17 at 19:18
I appreciate your grid example - but how will it center the "center" row while making the content of "top" align really at the very top? Basically making the 3rd row the "invisible element" discussed above? – B M Sep 21 '17 at 20:25
There are no invisible items in the Grid example. Just the two you have. The layout works by creating a grid with three rows (see the demo I posted). The bottom row remains empty. – Michael Benjamin Sep 21 '17 at 21:53
"empty" vs "invisible" :) But I agree your solution is the cleanest! – B M Sep 22 '17 at 09:00

CSS: flexbox container with top & center aligned divs

1 Answers1