Dynamic centered header bar with CSS - html

Question

currently I have this header bar
#header {
display: flex;
align-items: center;
height: 60px;
background: gray;
}
.box {
width: 32px;
height: 32px;
margin: 0 5px;
background: red;
}
<div id="header">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
and I want the containers align themselves in the center of the parent.
As you can see I always want the bar being centered when adding more divs or remove some of them.

Answer 1

Add the justify-content: space-around rule:
#header {
display: flex;
align-items: center;
height: 60px;
background: gray;
justify-content: space-around;
}
.box {
width: 32px;
height: 32px;
margin: 0 5px;
background: red;
}
<div id="header">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

Answer 2

You could also use justify-content: space-evenly;. The difference between space-around and space-evenly is that space around has less space towards the (left and right) edges of the parent container, whereas the space in space-evenly is similar everywhere.
#header {
justify-content: space-evenly;
display: flex;
align-items: center;
height: 60px;
background: gray;
}
.box {
width: 32px;
height: 32px;
margin: 0 20px;
background: red;
}
<div id="header">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
Here is a good resource for flexbox.