flexbox space-between and align right

Question

I have a div with 1 to 3 items and I want them to behave like this :

1. Three items : take the whole line with justify-content: space-between

   +-----------+ | 1 | 2 | 3 | +-----------+ 

2. If there is only 1 item, align it to the right.

   +-----------+ |       | 3 | +-----------+ 

Here's my code :

.container {    display: flex;    width: 300px;    justify-content: space-between;    /* Styling only */    padding: 10px;    background: #ccc;    margin-bottom: 10px;  }  .container div {    /* Styling only */    background: white;    padding: 20px 40px;    width: 10px;  }

<div class="container">    <div>      1    </div>    <div>      2    </div>    <div>      3    </div>  </div>    <div class="container">    <div>      3    </div>  </div>

I've found a solution with direction: rtl, but I hope there's a less hacky solution, and I prefer not to reorder my dom.

Any ideas?

Answer 1

There is a selector for that.

.container div:only-child {   margin-left: auto; } 

.container {    display: flex;    width: 300px;    justify-content: space-between;    /* Styling only */    padding: 10px;    background: #ccc;    margin-bottom: 10px;  }  .container div {    /* Styling only */    background: white;    padding: 20px 40px;    width: 10px;  }  .container div:only-child {    align-self: flex-end;    margin-left: auto;  }

<div class="container">    <div>      1    </div>    <div>      2    </div>    <div>      3    </div>  </div>    <div class="container">    <div>      3    </div>  </div>