How to align differently specific <div> in flexbox?

Question

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

My thinking is this:

• the column should have flights ( <div>):flex-direction: column;
• they are aligned top to bottom: align-content: flex-start;
• one particular 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 CSS

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

But this will not work - it seems that the third box is pressed ( flex-end) to the right, and not from the bottom.

My understanding was that it align-selfhandles the exception relative to the container ("the container aligns everything on top, but I will align myself on the bottom"). Is that not so?

Answer 1

align-self, margin-auto.

Flexbox

W3C:

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