How to justify a single flexbox item (override justify-content) [duplicate]

Question

You can override align-items with align-self for a flex item. I am looking for a way to override justify-content for a flex item.

If you had a flexbox container with justify-content:flex-end, but you want the first item to be justify-content: flex-start, how could that be done?

Answer 1

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.

Answer 2

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.