Align all item to left except last in a flexbox container

Question

Following is my code in which I am trying to align the last div (class="four") to the right and I am using align-self: flex-end; but still its not going to the right. Let me know what I am doing wrong here.

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid blue;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: pink;
}

.four {
  background: teal;
  display: inline-block;
  align-self: flex-end;
}

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

Abhishek Pandey · Accepted Answer · 2019-11-12T05:40:13.977

8

margin-left:auto; will do the job.

One use of auto margins in the main axis is to separate flex items into distinct "groups"...

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid blue;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: pink;
}

.four {
  background: teal;
  display: inline-block;
  margin-left:auto;
}

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

edited Nov 12 '19 at 05:40

answered Nov 12 '19 at 05:32

Abhishek Pandey

13,302
8
38
68

Thanks for the help, but any specific reason why we need to add `margin-left:auto;` in this case ? Let me know if I am missing something here conceptually. – Nesh Nov 12 '19 at 05:37
I have mentioned the link, you can read there more about it. – Abhishek Pandey Nov 12 '19 at 05:38

score 3 · Answer 2 · answered Nov 12 '19 at 05:32

3

use margin-left: auto

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid blue;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: pink;
}

.four {
  background: teal;
  display: inline-block;
margin-left: auto;
}

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

answered Nov 12 '19 at 05:32

Samuel Goldenbaum

18,391
17
66
104

Thanks for the help, but any specific reason why we need to add margin-left:auto; in this case ? Let me know if I am missing something here conceptually. – Nesh Nov 12 '19 at 05:37

score 1 · Answer 3 · answered Nov 12 '19 at 05:45

Align self property is used to adjust the flex items on the cross axis.

Please try this code.

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid blue;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: pink;
}

.four {
  background: teal;
  margin-left: auto;
}

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

score -1 · Answer 4 · answered Nov 12 '19 at 05:50

Another way to do.

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid blue;
  position: relative;
}

.one {
  background: red;
}

.two {
  background: yellow;
}

.three {
  background: pink;
}

.four {
  background: teal; 
  right: 0;
  position: absolute;
}

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>

Align all item to left except last in a flexbox container

4 Answers4