如何将 div 对齐到 flexed div 的左上角

Question

I want to make a image (inside a div) to the most left of the bottom div and I don't how to do this. For example I have this image

 .container { display: flex; flex-direction: column; align-items: center; }.applicationimage { width: 60px; height: 60px; border-radius: 100%; }.settings { display: flex; width: 80%; height: 40rem; background-color: white; align-self: center; }

 <main> <div class="container"> <div class="applicationinfo"> <img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage"> </div> <div class="settings"> <span>hi</span> </div> </div> </main>

I'm new to html & css so I will appreciate your help making this image to the most left of his bottom div.

Answer 1

If you know the width of the div , it's easy. You can give the .applicationinfo element align-self: flex-start; and margin-left: 10%; ( 10% is calculated by this formula: (100% - widthOfDiv) / 2 )

 body { background: black; }.container { display: flex; flex-direction: column; align-items: center; }.applicationinfo { align-self: flex-start; margin-left: 10%; }.applicationimage { width: 60px; height: 60px; border-radius: 100%; }.settings { display: flex; width: 80%; height: 40rem; background-color: white; align-self: center; }

 <main> <div class="container"> <div class="applicationinfo"> <img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage"> </div> <div class="settings"> <span>hi</span> </div> </div> </main>

Answer 2

remove the flex direction, here's it

   display: flex;
   justify-items: flex-end;
   align-items: flex-end;}

Answer 3

You can do it by positioning applicationinfo since you haven't styled it. you can add parent position: relative; then child to absolute; then give child top: 0; left: 0; top: 0; left: 0;

 .container { display: flex; height: 80vh; flex-direction: column; align-items: center; justify-content: center; align-items: center; position: relative; background: #222; border: 1px solid yellow; }.applicationinfo { width: 80%; top: 0; left: 0; border: 1px solid green; }.applicationimage { width: 60px; height: 60px; border-radius: 100%; border: 1px solid blue; }.settings { display: flex; width: 80%; height: 80%; background-color: white; align-self: center; }

 <div class="container"> <div class="applicationinfo"> <img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage"> </div> <div class="settings"> <span>hi</span> </div> </div>