412

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Mahks
  • 6,441
  • 6
  • 28
  • 31

6 Answers6

763

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.

Harry Moreno
  • 10,231
  • 7
  • 64
  • 116
Pavlo
  • 43,301
  • 14
  • 77
  • 113
  • 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 } ``` – Christian Schlensker Dec 10 '15 at 19:41
  • @Pavlo Any explanation for why is it working this way? – krulik Feb 10 '16 at 10:55
  • 8
    @krulik This behaviour is defined by the Flexbox spec, see https://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins – Pavlo Feb 15 '16 at 11:56
  • There is definitely a `justify-self` attribute now: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self – Jake Wilson Jul 11 '17 at 17:40
  • @JakeWilson Thanks for the heads up! As of now, the document is a draft, I'll try to update the answer when it will be finalized. – Pavlo Jul 12 '17 at 07:21
  • 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. – Jake Wilson Jul 13 '17 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 '18 at 03:48
  • I tried justify-self it doesn't work yet, could not find much information on it either – Vincent Tang Jul 09 '18 at 16:42
  • 6
    "In flexbox layouts, this property is ignored" -taken from the mozilla docs on justify-self – Finlay Percy Aug 07 '18 at 16:11
  • 1
    This answer doesn't have the expected behaviour in IE11. Any workaround there? See this pen in IE11: http://cssdeck.com/labs/krmc3eao – Vanch Sep 04 '18 at 13:42
  • I noticed the IE11 issue can be fixed by removing `justify-content: flex-end;` from the container, but keeping the `margin-right:auto;` – Vanch Sep 05 '18 at 07:54
  • 1
    To extend on this answer, you can accomplish centering the first element, relative to the container but pushing the second element to flex-end, by using a "dummy" div of width 0: https://codepen.io/clintonc/pen/NJjQMY – Clinton Chau Mar 08 '19 at 19:30
  • Make sure that `container` is full width! – dmraptis Oct 25 '19 at 10:04
  • You can also have multiple child items be `justify-content: flex-start` but have the last child item be `justify-content: flex-end` https://stackoverflow.com/a/63329856/1069914 – De'Yonte W. Aug 09 '20 at 18:37
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.

eeglbalazs
  • 1,988
  • 1
  • 14
  • 10
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.

borkxs
  • 211
  • 2
  • 3
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.

Micros
  • 5,966
  • 2
  • 28
  • 34
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.

Mahks
  • 6,441
  • 6
  • 28
  • 31
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>
De'Yonte W.
  • 127
  • 7