There is an HTML block in which I need to: the green block is in the middle of the parent block, and the red one is at the bottom. But something align-self does not work. What is the way to arrange the elements in the order I need?

 .parent { display: flex; flex-direction: column; width: 250px; height: 300px; border: 1px solid black; padding: 10px; } .parent > div { display: block; } .parent > div.flex-start-node { border: 2px solid green; height: 100px; width: 95%; margin: 0 auto; align-self: center; } .parent > div.flex-end-node { border: 2px solid red; height: 100px; width: 95%; margin: 0 auto; align-self: flex-end; } 
 <div class="parent"> <div class="flex-start-node"></div> <div class="flex-end-node"></div> </div>

    1 answer 1

    You need to use justify-content . The problem is that when setting the flex-direction: column; The properties turn over and change places. justify-content becomes align-items and align-items becomes justify-content

     .parent { display: flex; flex-direction: column; width: 250px; height: 300px; border: 1px solid black; padding: 10px; justify-content:flex-end; } .parent > div { display: block; } .parent > div.flex-start-node { border: 2px solid green; height: 100px; width: 95%; margin: 0 auto; align-self: center; } .parent > div.flex-end-node { border: 2px solid red; height: 100px; width: 95%; margin: 0 auto; } 
     <div class="parent"> <div class="flex-start-node"></div> <div class="flex-end-node"></div> </div>