CODEWITHSUNDEEP
htmlcssflexbox
WoJ
WoJ

Reputation: 29957

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

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:

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?

Upvotes: 6

Views: 2083

Answers (2)

Muhammad Shahryar
Muhammad Shahryar

Reputation: 90

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

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114991

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>

Upvotes: 6

Related Questions