413

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?

1

6 Answers 6

766

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">justify-start</div>
  <div class="block"></div>
</div>

¹ This behaviour is defined by the Flexbox spec.

14
  • 74
    This technique is excellent and it also works in the vertical direction. For instance, you want the last element inside a fixed height container to stick to the bottom. You can use ``` .container { flex-direction: column; justify-content: flex-start } .last-item { margin-top: auto } ``` Dec 10, 2015 at 19:41
  • 8
    @krulik This behaviour is defined by the Flexbox spec, see w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins
    – Pavlo
    Feb 15, 2016 at 11:56
  • 9
    After some more investigation, justify-self might not have anything to do with flexbox but rather is used with css grids but I'm not sure. I can't seem to get it to work in Chrome with flexbox. Jul 13, 2017 at 15:58
  • 14
    What if I want one item to be on the left, and the other one in the center?
    – Fahmi
    Jan 18, 2018 at 3:48
  • 6
    "In flexbox layouts, this property is ignored" -taken from the mozilla docs on justify-self Aug 7, 2018 at 16:11
25

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.

2
  • 1
    It does work without specifying width (at least it did in my situation)
    – eeglbalazs
    Mar 28, 2015 at 16:26
  • Try min-width: 0 Oct 1, 2019 at 20:28
21

If you aren't actually restricted to keeping all of these elements as sibling nodes you can wrap the ones that go together in another default flex box, and have the container of both use space-between.

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}
<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

Or if you were doing the same thing with flex-start and flex-end reversed you just swap the order of the default-flex container and lone child.

2

I solved a similar case by setting the inner item's style to margin: 0 auto.
Situation: My menu usually contains three buttons, in which case they need to be justify-content: space-between. But when there's only one button, it will now be center aligned instead of to the left.

1

For those situations where width of the items you do want to flex-end is known, you can set their flex to "0 0 ##px" and set the item you want to flex-start with flex:1

This will cause the pseudo flex-start item to fill the container, just format it to text-align:left or whatever.

1

To expand on Pavlo's answer https://stackoverflow.com/a/34063808/1069914, you can have multiple child items justify-content: flex-start in their behavior but have the last item justify-content: flex-end

.container {
  height: 100px;
  border: solid 10px skyblue;
  display: flex;
  justify-content: flex-end;
}

.container > *:not(:last-child) {
    margin-right: 0;
    margin-left: 0;
}

/* set the second to last-child */
.container > :nth-last-child(2) {
    margin-right: auto;
    margin-left: 0;
}

.block {
  width: 50px;
  background: tomato;
  border: 1px solid black;
}
<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block" style="width:150px">I should be at the end of the flex container (i.e. justify-content: flex-end)</div>
</div>

Not the answer you're looking for? Browse other questions tagged or ask your own question.