How to justify a single flexbox item (override justify-content)
There doesn't seem to be justify-self
, but you can achieve similar result setting appropriate margin
to auto
¹. E. g. for flex-direction: row
(default) you should set margin-right: auto
to align the child to the left.
.container {
height: 100px;
border: solid 10px skyblue;
display: flex;
justify-content: flex-end;
}
.block {
width: 50px;
background: tomato;
}
.justify-start {
margin-right: auto;
}
<div class="container">
<div class="block justify-start"></div>
<div class="block"></div>
</div>
¹ This behaviour is defined by the Flexbox spec.
AFAIK there is no property for that in the specs, but here is a trick I’ve been using:
set the container element ( the one with display:flex
) to justify-content:space-around
Then add an extra element between the first and second item and set it to flex-grow:10
(or some other value that works with your setup)
Edit: if the items are tightly aligned it's a good idea to add flex-shrink: 10;
to the extra element as well, so the layout will be properly responsive on smaller devices.