How to align a div to top left on flexed div

user_15050289 0
Viewed 57

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 imageenter image description here

.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.

css html
3 Answers

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>

user_166347380

remove the flex direction, here's it

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

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;

.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>

user_64679020
Related