justify-content: flex-end; and flex-direction: column; are not working together

Question

I have a general task - put all items inside progressIcon___2kE1o by right border of the its container. For some reasons it doesn't work...

<div class="progressIcon___2kE1o" style="
    padding: 0;
    margin: 0;
    width: 240px;
    display: flex;
    flex-direction: column;
    /* align-items: stretch; */
    justify-content: flex-end;
">
  <div class="svgIconWrap___asD4K" style="
    padding: 0;
    margin: 0;
    display: flex;
"><svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " filter="" fill="url(#crimes)" stroke="black" stroke-width="0" width="37px" height="26px" viewBox="0 0 37 26"><linearGradient id="crimes" gradientTransform="" x1="22" y1="25.5" x2="22" y2="10.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#dda80b"></stop><stop offset="1" stop-color="#ffdc73"></stop></linearGradient><path class="figure" d="M20.5,25.5V19.25a4.5,4.5,0,1,1,3,0V25.5Z"></path><path class="contour" d="M22,11a4,4,0,0,1,1,7.88V25H21V18.88A4,4,0,0,1,22,11m0-1a5,5,0,0,0-2,9.59V26h4V19.59A5,5,0,0,0,22,10Z" style="fill: white;"></path><path class="figure" d="M8.5,25.5v-9a1,1,0,0,0-2,0v9h-2v-9a1,1,0,0,0-2,0v9H.5V9.75L4.83,6.5H6.17L10.5,9.75V25.5Z"></path><path class="contour" d="M6,7l4,3v1H1V10L5,7H6m4,5V25H9V16.5a1.5,1.5,0,0,0-3,0V25H5V16.5a1.5,1.5,0,0,0-3,0V25H1V12h9M6.33,6H4.67l-.27.2-4,3L0,9.5V26H3V16.5a.5.5,0,0,1,1,0V26H7V16.5a.5.5,0,0,1,1,0V26h3V9.5l-.4-.3-4-3L6.33,6Z" style="fill: white;"></path><path class="figure" d="M10.5,25.5V.5h8v25Zm6-5v-3h-4v3Z"></path><path class="contour" d="M18,1V25H11V1h7M16,16h1V2H16V16m-2,0h1V2H14V16m-2,0h1V2H12V16m0,5h5V17H12v4M19,0H10V26h9V0ZM13,18h3v2H13V18Z" style="fill: white;"></path><path class="figure" d="M24.5,25.5V16.29a5.5,5.5,0,1,1,3,0V25.5Z"></path><path class="contour" d="M26,6a5,5,0,0,1,1,9.9V25H25V15.9A5,5,0,0,1,26,6m0-1a6,6,0,0,0-2,11.66V26h4V16.66A6,6,0,0,0,26,5Z" style="fill: white;"></path><path class="figure" d="M30.5,25.5V19.25a4.5,4.5,0,1,1,3,0V25.5Z"></path><path class="contour" d="M32,11a4,4,0,0,1,1,7.88V25H31V18.88A4,4,0,0,1,32,11m0-1a5,5,0,0,0-2,9.59V26h4V19.59A5,5,0,0,0,32,10Z" style="fill: white;"></path><path class="figure" d="M18.5,25.5V25a3.5,3.5,0,0,1,7,0v.5Z"></path><path class="contour" d="M22,22a3,3,0,0,1,3,3H19a3,3,0,0,1,3-3m0-1a4,4,0,0,0-4,4v1h8V25a4,4,0,0,0-4-4Z" style="fill: white;"></path><path class="figure" d="M28.5,25.5V25a4.27,4.27,0,0,1,4-4.5,4.27,4.27,0,0,1,4,4.5v.5Z"></path><path class="contour" d="M32.5,21A3.78,3.78,0,0,1,36,25H29a3.78,3.78,0,0,1,3.5-4m0-1A4.77,4.77,0,0,0,28,25v1h9V25a4.77,4.77,0,0,0-4.5-5Z" style="fill: white;"></path></svg></div>
  <div class="starsWrap___2kEvv" style="
    padding: 0;
    margin: 0;
    display: flex;
">
    <div class="svgIconStar___1NY_A"><svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " filter="" fill="#ffac00" stroke="0" stroke-width="0" width="5px" height="5px" viewBox="0 0 5 5"><path d="M2.5,0l.59,1.82H5L3.45,2.94l.6,1.82L2.5,3.63,1,4.76l.6-1.82L0,1.82H1.91Z"></path></svg></div>
    <div class="svgIconStar___1NY_A"><svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " filter="" fill="#ffac00" stroke="0" stroke-width="0" width="5px" height="5px" viewBox="0 0 5 5"><path d="M2.5,0l.59,1.82H5L3.45,2.94l.6,1.82L2.5,3.63,1,4.76l.6-1.82L0,1.82H1.91Z"></path></svg></div>
    <div class="svgIconStar___1NY_A"><svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " filter="" fill="#ffac00" stroke="0" stroke-width="0" width="5px" height="5px" viewBox="0 0 5 5"><path d="M2.5,0l.59,1.82H5L3.45,2.94l.6,1.82L2.5,3.63,1,4.76l.6-1.82L0,1.82H1.91Z"></path></svg></div>
    <div class="svgIconStar___1NY_A"><svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " filter="" fill="#ffac00" stroke="0" stroke-width="0" width="5px" height="5px" viewBox="0 0 5 5"><path d="M2.5,0l.59,1.82H5L3.45,2.94l.6,1.82L2.5,3.63,1,4.76l.6-1.82L0,1.82H1.91Z"></path></svg></div>
    <div class="svgIconStar___1NY_A"><svg xmlns="http://www.w3.org/2000/svg" class="default___3oPC0 " filter="" fill="#ffac00" stroke="0" stroke-width="0" width="5px" height="5px" viewBox="0 0 5 5"><path d="M2.5,0l.59,1.82H5L3.45,2.94l.6,1.82L2.5,3.63,1,4.76l.6-1.82L0,1.82H1.91Z"></path></svg></div>
  </div>
</div>

Answer 1

Anyway, align-items: flex-end; and justify-content: flex-end is not working on flex-direction: row-reverse. example :

.div {
 display: flex;
 flex-direction: row-reverse;
 justify-content: flex-end;
 align-items: flex-end;
 & .child1 {
 }
 & .child2 {
 }

}

I wanted child2 to display before child1 So, solution is not using reverse

.div{ display: flex; flex-direction: row; justify-content: flex-end}
.child1 { order: 1}
.child2 {order: 2}

this work if want to reverse direction. For the flex-direction: column-reverse as well.

Answer 2

Please use a height in the container. When you use flex-direction: column and Justify-content. For Example,

Html Part:

<div class="container">
    <div class="item one">1</div>
    <div class="item two">2</div>
    <div class="item three">3</div>
    <div class="item four">4</div>
    <div class="item five">5</div>
    <div class="item six">6</div>
</div>

CSS Part:

.one, .three, .five {
    background-color: tomato;
}
.two, .four, .six {
    background-color: teal;
}
.container {
    display: flex;
    text-align: center;
    height: 700px;
    flex-direction: column;
    /* flex-wrap: wrap; */
    /* flex-flow: column wrap; */
    justify-content: space-around;
}

Answer 3

When you use flex-direction: column and Justify-content: and if it's not working that means there is no space left vertically (across axis). If you want to see it working - try to give custom height (increased - say height: 400px; or more for example ) and then you will see justify-content will start reflecting.

Answer 4

justify-content only works on flex-direction: row and flex-direction: row-reverse. In flex-direction: column you have to use align-items: flex-end;.

You can test your flexbox design in this website. http://css3generator.com/

You can test here and copy these code to your code.

Answer 5

Its simple, you need to use align-items instead of justify-content since your flex-direction is set to column. Replace your css for div class progressIcon___2kE1o with this:

padding: 0;
margin: 0;
width: 240px;
display: flex;
flex-direction: column;
align-items: flex-end;