justify-self doesn't seem to be functioning properly. Any ideas why?
html
<div class="container">
<div class="a">
</div>
<div class="b">
</div>
<div class="b">
</div>
</div>
css
.container {
display: flex;
justify-content: center;
background: yellow;
}
.container * {
width: 10px;
height: 10px;
background: green;
border: 2px solid red;
}
.a {
justify-self: start;
}
I assumed that the first element with the class a should align to the left since it specifies justify-self: start, but that doesn't happen. Any insights on why this might be?
Comments informed me that flexbox does not support the justify-self property. In that case, how could I use grid to position two children in the middle of the parent and one child to stick to the left side?