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>

我使用此代碼製作flex div。左側有一些文字，右側有一張圖像。我使用align-items: flex-start;，以便圖像不會伸展。代碼工作良好，但有沒有辦法將圖像總是移動到div的右下角？就像這樣：CSS flex div image to the right

來源

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 flex div image to the right

回答

相關問題