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.

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/

Answer 1

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.

Answer 2

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.

Answer 3

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/

Answer 4

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 */
}

<div class="container">
    <div class="body">
        <div>top content</div>
        <div>middle content</div>
    </div>
    <div class="bottom">
        bottom content
    </div>
</div>

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

Answer 5

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;
}

Answer 6

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>

Answer 7

.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>

Answer 8

It's the limitation with flexbox and we have to accept it.

Here are 2 alternate solutions that you can try,

1. Use div to group [top] [middle] as one and [bottom] as the other one. Also, create a section to cover them together with display flex, direction as column and justify-content as space between.

PS: Apply CSS through class/id, I applied to section for example only.

2. Since the direction is column, just use justify-content: space-between and it will divide all horizontal space equally with top, middle and bottom. Not the perfect accurate solution but serves the purpose with cards and small components.

Answer 9

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

Answer 10

You can do it without flex box, like this:

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}