Flexbox column align self to bottom

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.

I want a div to stick to the bottom of the parent div using flexbox. With flex-direction: column and align-content: Space-between i can do this, but the middle div will align in the center, i want the middle one to be sticked to the top as well.

[top]

[middle]

[bottom]

align-self: flex-end will make it float right, not bottom.

complete flexbox docs: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

I'm a bit late to the party, but might be relevant for others trying to accomplish the same you should be able to do:

margin-top: auto

on the element in question and it should go to the bottom. Should do the trick for firefox, chrome and safari.

Basically, the answer is to give to the last of the middle elements a flex grow 1 code as follows:

.middle-last{
  flex-grow: 1; // assuming none of the other have flex-grow set
}

Thanks, T04435.

I found my own solution, i will add it here for documentation value;

If you give the middle block height: 100% it will take up al the room in the middle. So the bottom block will be at the actual bottom and top and middle are on top.

UPDATE: This doesn't work for Chrome...

UPDATE: Found a way that works for FF/Chrome: setting flex-grow on a higher number (1 is enough) for [middle] will make it take full middle size. more info: http://css-tricks.com/almanac/properties/f/flex-grow/

align self property rely on the alignment of an item in respect of the cross axis, not the main axis. So this is not the way to go. You have several options to achieve that using flexbox, though:

1. Use flex-grow:1 on your middle item. This will make it grow taking all remaining space in the container, thus pushing your last div to the bottom.

2. Refactor your layout so that there is a main div with justify-content:space-between so that your last div will be sticked to the bottom:

   .container{ display:flex; flex-direction:column; justify-content:space-between; } .body{ display:flex; flex-direction:column; } .bottom{ /* nothing needed for the outer layout */ }

   top content

   middle content

   bottom content

3. This is a bit weird, but you could even do that using align-self but inverting the flex direction and allowing items to wrap:

   .container{ display:flex; flex-direction:row; flex-wrap:wrap; } .body{ display:flex; flex-direction:column; flex-basis:100%; } .bottom{ align-self:flex-end }

I've tested all this out using this free flexbox designer: http://algid.com/Flex-Designer

Considering that your website has a basic structure, here's a solution that I used and applied in a similar situation, with just a few lines of code:

HTML

<div class="site-container">
    <header>your header</header>
    <main>your main with little content</main>
    <footer>your footer</footer>
</div>

CSS

.site-container{
    min-height: 100vh;   //not necessary to calculate the height of the footer
    display: flex;
    flex-direction: column;
}

footer{
    margin-top: auto;
}

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 {
  height: 700px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
}

.top {
  height: 30px;
  width: 400px;
  background-color: blue;
}

.middle {
  width: 400px;
  background-color: green;
}

.bottom {
  height: 30px;
  width: 400px;
  background-color: red;
}

<div class="container">

  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
  
</div>

.message-container {
    display: flex;
    flex-direction: column;
    place-content: flex-end;
    height: -webkit-fill-available;
}

.message {
    display: table-cell;
}

Try this. I use it for messenger.

.container {
  height: 400px;
}

.message-container {
    display: flex;
    background: #eee;
    flex-direction: column;
    place-content: flex-end;
    height: -webkit-fill-available;
}

.user-message {
    align-self: flex-start;
    display: table-cell;
    padding: 5px;
    margin: 10px;
    border-radius: 10px;
    background-color: rgba(154, 247, 200, 0.692);
}

.friend-message {
    align-self: flex-end;
    display: table-cell;
    padding: 5px;
    margin: 10px;
    border-radius: 10px;
    background-color: rgba(169, 207, 250, 0.692);
}

<div class='container'>
  <div class='message-container'>
    <div class='user-message'>Hello!</div>
    <div class='friend-message'>Hi.</div>
  </div>
</div>

Align the items of the parent container to the baseline, with child items as inline blocks.