6

I use flexbox for my layout and after completing Flexbox Froggy I tried to get the following alignment:

enter image description here

My thinking is the following:

  • the boxes (<div>) need to flow in a column: flex-direction: column;
  • they are aligned top-down: align-content: flex-start;
  • one specific box aligns itself to the bottom: align-self: flex-end;

This leads to the HTML code below (also available on JSFiddle)

<div class="container">
  <div class="box1">
    box 1
  </div>
  <div class="box2">
    box 2
  </div>
  <div class="box3">
    box 3
  </div>
</div>

with the CSS

.container {
  display: flex; 
  flex-direction: column;
  align-content: flex-start;
}
.box3 {
  align-self: flex-end;
}

But it does not work - it looks like to third box is pushed (flex-end) to the right and not to the bottom.

enter image description here

My understanding was that align-self handles an exception relative to the container ("the container aligns everything from the top, but I, myself, will align to the bottom"). Isn't that so?

m4n0
  • 29,823
  • 27
  • 76
  • 89
WoJ
  • 27,165
  • 48
  • 180
  • 345
  • 2
    Note that `align-self` works along the cross axis, since the flex-direction is column, it works correctly. You also need to check this question: http://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties – m4n0 Dec 07 '15 at 16:30
  • 2
    @ManojKumar: thank you - I now understand why the alignment to the end was actually to the right. I was misunderstanding how `align-self`worked. The question (and answers) you link to are fantastic; – WoJ Dec 08 '15 at 06:19

2 Answers2

6

You don't need to use align-self, you can do this with margin-auto.

Flexbox's Best-kept secret

W3C Spec: Auto Margins

.container {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  height: 150px;
  border:1px solid grey;
}
.box3 {
  margin-top: auto;
  background:lightgreen;
}
<div class="container">
  <div class="box1">
    box 1
  </div>
  <div class="box2">
    box 2
  </div>
  <div class="box3">
    box 3
  </div>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Thank you, this is something new for me. Why isn't the whole box green in your example (even though the margin for box3 reaches up to box2)? Is there a property to set the color of the margin? I just saw `background`and `border` – WoJ Dec 08 '15 at 06:24
  • Margins don't have colour. They represent the space between elements. – Paulie_D Dec 08 '15 at 07:57
  • Note: this only worked when I forcefully set the `height` of the container. – WoJ Dec 08 '15 at 09:18
  • That would be standard for flexbox columns...they all require a height limitation. – Paulie_D Dec 08 '15 at 10:02
0

More appropriate approach would be to give your container a height in Percentage rather than Pixels if that's what you want.

.container {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  height: 100%;
}

.box3 {
  margin: auto 0;
}
Muhammad Shahryar
  • 38
  • 5