Flexbox space-between but center if one element - css

Question

I've the following HTML and CSS.
<div class="container-box">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container-box">
<div class="box"></div>
</div>
.container-box {
width: 200px;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: red;
margin:50px;
}
.box {
background-color: #9009A0;
height: 50px;
width: 50px;
}
Which gives this layout:
The first layout for multiple items does what I expect, but how can I change the second to position the element in center as it only has one element?
See this codepen: https://codepen.io/dennismadsen/pen/oNvqjjV

Answer 1

For cases where you have one item in the container, you can use the :only-child pseudo-class.
Add this to your code:
.box:only-child {
margin: 0 auto;
}
.container-box {
width: 200px;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: red;
margin: 50px;
}
.box {
background-color: #9009A0;
height: 50px;
width: 50px;
}
.box:only-child {
margin: 0 auto;
}
<div class="container-box">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container-box">
<div class="box"></div>
</div>
In such cases, flex auto margins will override justify-content because:
§ 8.1. Aligning with auto
margins
Prior to alignment via justify-content and align-self, any
positive free space is distributed to auto margins in that dimension.
More about :only-child:
§ 6.6.5.10. :only-child
pseudo-class
The :only-child pseudo-class represents an element that has no
siblings. Same as :first-child:last-child or
:nth-child(1):nth-last-child(1), but with a lower specificity.
More about flex auto margins:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
Also, to spotlight some interesting flex behavior, if you were using space-around instead of space-between, you wouldn't need auto margins.
Flex item should align left, not center, when it wraps

Answer 2

For info, You could also use together :first-child and :last-child if you wanted to mind about very old browsers ;)
.container-box {
width: 200px;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: red;
margin: 50px;
}
.box {
background-color: #9009A0;
height: 50px;
width: 50px;
}
.container-box .box:first-child:last-child {
margin: 0 auto;
}
<div class="container-box">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container-box">
<div class="box"></div>
</div>

Answer 3

Here is a different idea with only margin:
.container-box {
width: 400px;
display: flex;
background-color: red;
margin: 30px;
}
.box {
background-color: #9009A0;
height: 50px;
width: 50px;
}
.box:first-child {
margin-right: auto;
}
.box:last-child {
margin-left: auto;
}
<div class="container-box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container-box">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container-box">
<div class="box"></div>
</div>
If you will have more than 3 elements you can add an extra rule
.container-box {
width: 400px;
display: flex;
background-color: red;
margin: 30px;
}
.box {
background-color: #9009A0;
height: 50px;
width: 50px;
}
.box:not(:last-child):not(:first-child) {
margin:auto;
}
.box:first-child {
margin-right: auto;
}
.box:last-child {
margin-left: auto;
}
<div class="container-box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container-box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container-box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container-box">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container-box">
<div class="box"></div>
</div>