右にCSSフレックスdivイメージ

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

フレックスを作るのにこのコードを使用しますdiv。左にテキストがあり、右にイメージがあります。私は画像が伸びないようにalign-items: flex-start;を使います。コードはうまくいきますが、画像を常にdivの右下に移動する方法はありますか？このように：右にCSSフレックスdivイメージ

出典

2017-09-23 darkchampionz

このCSSルールを追加するには

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

スタックは、スニペットことを成し遂げるだろう

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

出典

2017-09-23 19:31:41 LGSon

右にCSSフレックスdivイメージ

答えて

関連する問題