Flexbox column align self to bottom

Question

Im trying to use Flexbox. http://css-tricks.com/almanac/properties/a/align-content/ this shows nice alignment options; but i would actually want a Top-top-bottom situation.

Answer 1

I know this is a old post but the same problem, with Flexbox's single axis alignment, made me nuts for an hour.

The auto margin is a nice trick but i wanted to share my solution with CSS Grid.

The important part is the definition of the grid-template-rows. With auto the rows have the same height as the content and 1fr uses the remaining space for the middle row.

Here a nice overview about CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: 1em;
  justify-content: center;
}

.top {
  height: 2em;
  width: 10em;
  background-color: blue;
}

.middle {
  height: 3em;
  width: 10em;
  background-color: green;
}

.bottom {
  height: 2em;
  width: 10em;
  background-color: red;
}

  

    
TOP
  
  

    
MIDDLE
  
  

    
BOTTOM