Menu
I have a layout where sometimes the 'left' item is missing. In such cases, I still want the 'right' item to be right-aligned.
I thought I could do this with justify-self but that doesn't appear to be the case.
Is there a flexbox property for right-aligning one's self?
.row { border: 1px solid black; display: flex; justify-content: space-between; align-items: center; } .left, .right { display: inline-block; background-color: yellow; } .right { justify-self: flex-end; }<div class="row"> <!--<div class="left">left</div>--> <div class="right">right</div> </div>
208
Why are there no justify-items and justify-self properties? One answer may be: Because they're not necessary. The flexbox specification provides two methods for aligning flex items along the main axis: The justify-content keyword property, and.
The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.
You could use margin-left: auto on right element instead. Also when you use display: flex on parent element display: inline-block on child elements is not going to work.
.row { border: 1px solid black; display: flex; align-items: center; } .left, .right { background-color: yellow; } .right { margin-left: auto; }<div class="row"> <!--<div class="left">left</div>--> <div class="right">right</div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
