css flexbox 3 children div, middle div should not change

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>

I was struggling with the same problem and this answer to another question worked very well for me: https://stackoverflow.com/a/65610410/787842. The other answers on that question might also be useful to you. — cjauvin, Aug 19 '22 at 17:03

hassan-badat · Answer 1 · 2021-03-25T22:21:31.380

0

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;
}

edited Mar 25 '21 at 22:21

answered Mar 25 '21 at 22:09

hassan-badat

53
5

with space-between, it distribute equal space between all the three div but when i add some more content to right div like image and button it move my middle div more toward left . – Mitul Pancholi Mar 25 '21 at 22:13
Before adding content : - [link](https://prnt.sc/10vgu94) After adding random content : - [link](https://prnt.sc/10vgv44) – Mitul Pancholi Mar 25 '21 at 22:16

score 0 · Answer 2 · answered Mar 25 '21 at 22:18

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;
}

score 0 · Answer 3 · answered Mar 25 '21 at 22:19

0

Try doing this in CSS Grid:

.header__div{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

answered Mar 25 '21 at 22:19

DumbUXEngineer

71
4

css flexbox 3 children div, middle div should not change

3 Answers3