CSS/HTML background image fixed issue [duplicate] - html

Question

This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
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$
When I run it, I have green and blue boxes in a big red box. The green and blue are on the left corner.
since the parent container, which is "as" has display: flex and flex-direction: column
I can't go to the left bottom corner.
Is there a way to go to the left bottom? besides make it position: relative and bottom: %.
Thank you
Hi, I am practicing CSS

Answer 1

Do you need use property the justify-content with value flex-end to the left bottom corner
Look this example bellow
.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>