How to align differently a specific <div> in flexbox?

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>

Tags:

Html

Css

Flexbox

Related