CSS/HTML背景图像修复问题

Question

CSS

.as {
width: 300px;
height: 300px;
border: 5px solid red;
position: absolute;
left: 25%;
display: flex;
flex-direction: column;

}
.ab {
width: 60px;
height: 60px;
border: 2px solid green;
background-color: green;
}
.cd {
width: 60px;
height: 60px;
border: 2px solid blue;
background-color: blue;
}

HTML
$div class="as"$
$div class="ab"$123$/div$
$div class="cd"$123$/div$
$/div$

当我运行它时，我在一个大红色盒子里有绿色和蓝色的盒子。绿色和蓝色的在左角。因为父容器是"as"有显示:flex和flex-direction:列我到不了左下角。有办法到左下角吗?此外，使它position: relative和bottom: %。谢谢你！嗨，我正在练习CSS

Answer 1

是否需要在左下角使用property the justify-content with value - flex-end

看下面的例子

.as {
width: 300px;
height: 300px;
border: 5px solid red;
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
.bottom-left {
justify-content: flex-end;
}
.bottom-right {
align-items: flex-end;
justify-content: flex-end;
}
.ab {
width: 60px;
height: 60px;
border: 2px solid green;
background-color: green;
}
.cd {
width: 60px;
height: 60px;
border: 2px solid blue;
background-color: blue;
}

<p>Bottom left</p>
<div class="as bottom-left">
<div class="ab">123</div>
<div class="cd">123</div>
</div>
<p>Bottom right</p>
<div class="as bottom-right">
<div class="ab">123</div>
<div class="cd">123</div>
</div>