Why align-self is showing my box to bottom rather to be at flex end if the flex direction is row?

Question

#container2 {
  height: 80vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#one {
  height: 50%;
  width: 25%;
  background-color: coral;
}

#two {
  height: 50%;
  width: 25%;
  background-color: crimson;
}

#three {
  height: 50%;
  width: 25%;
  background-color: rgb(80, 30, 12);
  align-self: flex-end;
}

<main>
  <div id="container2">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>
</main>

in the above code i have used flex properties in the third div tag i wanted to shift it to right bottom when i use align self to flex end it alligned to bottom

Answer 1

The standard method for moving the last flex item to the end of the container is to apply margin-left: auto; to it (or margin-top: auto for vertically oriented flex containers):

#container2 {
  height: 80vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#one {
  height: 50%;
  width: 25%;
  background-color: coral;
}

#two {
  height: 50%;
  width: 25%;
  background-color: crimson;
}

#three {
  height: 50%;
  width: 25%;
  background-color: rgb(80, 30, 12);
  margin-left: auto;
}

<main>
  <div id="container2">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>
</main>

Answer 2

If you remove in your third container the css flex property align-self: flex-end;then it will works. You don't needed.

Then you have all three next to each other. to move the last block to the right edge you can assign the third block with margin-left: auto; as @Johannes correctly suggested. But I only came up with this because of Johannes' answer. Therefore +1 for him ;-)

#container2{
    height: 80vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#one{
    height:50%;
    width:25%;
    background-color: coral;
}
#two{
    height:50%;
    width:25%;
    background-color:crimson;

}
#three{
    height:50%;
    width:25%;
    background-color: rgb(80, 30, 12);  
    margin-left: auto;  
}

<main>
  <div id="container2">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>
</main>