右侧的 CSS flex div 图像答案

【问题标题】：CSS flex div image to the right右侧的 CSS flex div 图像
【发布时间】：2017-09-24 03:41:20
【问题描述】：

<!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 的右下角？像这样：

【问题讨论】：

标签： html image css flexbox

【解决方案1】：

添加此 CSS 规则即可完成此操作

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

堆栈sn-p

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

【讨论】：