css flexbox 3 children div, middle div should not change - html

Question

i have 3 div for navbar and using flexbox i want to keep my middle div at center no matter how much i put content at the right div or left div
:- right now the content inside left and right div is just text
but i want to put logo and other stuff
but the middle div keep moving as my right div keeps growing
here is the code
<div class="header__div">
<!-- Left Button -->
<div class="left__header">
a
</div>
<!-- Left Button End -->
<!-- middle button -->
<div class="middle__header">
a
</div>
<!-- middle button end -->
<!-- Right Logo -->
<div class="right__header">
a
</div>
<!-- Right Logo end -->
</div>

Answer 1

Flexbox is designed to have even spacing between it's children depending on how you justify the content. If one side is bigger the centre child will move to keep even spacing between the children.
If you want to ensure that the centre child is always in the centre, I would suggest using grid as this will ensure they have their own columns and they stick to them.
.header__div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

Answer 2

Try doing this in CSS Grid:
.header__div{
display: grid;
grid-template-columns: repeat(3, 1fr);
}

Answer 3

One way to do this with flexbox is have 3 divs inside the header and give them all a flex value of 1 (You can change the proportions as you add content). Make the nested div in the center have "justify-content: center" and then you can place any other tags in the divs on the right and left of the center.
.header__div {
display: flex;
width: 100%
}
.div__1 {
flex: 1;
}
.div__2 { // Logo goes in this one
flex: 1;
justify-content: center;
align-items: center;
}
.div_3 {
flex: 1;
}