78

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
  • 256,080
  • 255
  • 805
  • 1,172

1 Answers1

111

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
  • 111,264
  • 15
  • 131
  • 153
  • margin: auto not responsive as i tested – mercury Nov 17 '19 at 02:29
  • 36
    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
  • 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