CSS Flex Div Bild auf der rechten Seite

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

Ich benutze diesen Code, um einen Flex div zu machen. Links ist ein Text und rechts ein Bild. Ich benutze align-items: flex-start;, damit das Bild nicht dehnt. Code funktioniert gut, aber gibt es eine Möglichkeit, das Bild immer nach unten rechts vom div zu verschieben? Wie folgt aus:CSS Flex Div Bild auf der rechten Seite

Quelle

2017-09-23 darkchampionz

diese CSS-Regel hinzufügen würde erreichen, dass

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

Stapel

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

Snippet

Quelle

2017-09-23 19:31:41 LGSon

CSS Flex Div Bild auf der rechten Seite

Antwort

Verwandte Themen