Align all item to left except last in a flexbox container [duplicate] - html

Question

This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
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>

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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>