98

I have a layout where sometimes the 'left' item is missing. In such cases, I still want the 'right' item to be right-aligned.

I thought I could do this with justify-self but that doesn't appear to be the case.

Is there a flexbox property for right-aligning one's self?

.row {
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left,
.right {
  display: inline-block;
  background-color: yellow;
}

.right {
  justify-self: flex-end;
}
<div class="row">
  <!--<div class="left">left</div>-->
  <div class="right">right</div>
</div>
mpen
  • 272,448
  • 266
  • 850
  • 1,236

1 Answers1

155

You could use margin-left: auto on right element instead. Also when you use display: flex on parent element display: inline-block on child elements is not going to work.

.row {
  border: 1px solid black;
  display: flex;
  align-items: center;
}
.left,
.right {
  background-color: yellow;
}
.right {
  margin-left: auto;
}
<div class="row">
  <!--<div class="left">left</div>-->
  <div class="right">right</div>
</div>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
  • margin: auto not responsive as i tested – mercury Nov 17 '19 at 02:29
  • 55
    To add to this answer, `justify-self` is simply not supported in flexbox because it justifies all its items as a group. More info here (along with the margin tip): https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox – Rokit Jan 17 '20 at 17:16
  • I created a pen to emulate this: https://codepen.io/srsgores/pen/abNLGgr – user1429980 Sep 02 '20 at 19:16
  • margin-left / margin-right did not work to split them for me - it centered them instead. – TetraDev Oct 27 '20 at 20:48
  • 2
    An alternative to `margin-left: auto` is having `justify-content: space-between` on the parent (assuming there are only two children). – Venryx Dec 10 '21 at 22:52