flexbox justify-self: flex-end not working? [duplicate]

Question

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>

Answer 1

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>