CODEWITHSUNDEEP
htmlimagecssflexbox
darkchampionz
darkchampionz

Reputation: 1224

CSS flex div image to the right

<!DOCTYPE html>
<html>
<head>
<style> 
.div1 {
    border: 1px solid red;
    display: flex;
    align-items: flex-start;
}
</style>
</head>
<body>

<div class="div1">
    123<br>456<br>789
    <img src="smiley.gif">
</div>
</div>

</body>
</html>

I use this code to make a flex div. There is some text on the left and an image to the right. I use align-items: flex-start; so that the image doesn't stretch. Code works good but is there a way to move the image always to the bottom right of the div? Like this:

enter image description here

Upvotes: 0

Views: 281

Answers (1)

Asons
Asons

Reputation: 87191

Adding this CSS rule would accomplish that

.div1 img {
    margin-left: auto;         /*  push it to right  */
    align-self: flex-end;      /*  push it to bottom  */
}

Stack snippet

.div1 {
    border: 1px solid red;
    display: flex;
    align-items: flex-start;
}

.div1 img {
    margin-left: auto;
    align-self: flex-end;
}
<div class="div1">
    123<br>456<br>789<br>
    123<br>456<br>789
    <img src="http://placehold.it/50/f00">
</div>

Upvotes: 2

Related Questions