Mahks Mahks - 1 month ago 13
CSS Question

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

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?

This was best answered by this post: http://stackoverflow.com/a/33856609/269396

Answer

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.

Comments