Streaming live at 10am (PST)

Best way to center divs with different width

Hi , i’m pretty a newbie here … the thing is webflow community is awesome , full of tutorials and forum support. So i decided to take advantage of that :smiley:

Which is the best way to center divs ,like in a header , when this ones are of a different width size…? In my case there are 3 different divs and i want one right in the center and the other two at the end left and right ; so i thought one way could be :

Setting a fixed width for each div then flex center and give padding left-right to the centered div but i actually don’t like that because things get messy in responsiveness i guess

Which is the best practice in this case?
Thanks in advice !


Here is my site Read-Only:

Which shouldn’t be a concern as Flex is CSS so you can change the settings for each device.

So use flex:

I don’t really see the exact result you’re after but anything is possible using the width, max width, flex child and flex options. If you have a mockup of what you’re after I can tell you how to make it for each device.

You can change the behavior of the felx childs (the divs) to make them shrink or expand:

1 Like

I updated my link , followed your suggestions
I used expand on all three divs , and set on each one the proper alignment, the center div: center , left left and right right ofc… Now if you check my updated link i have 2 elements inside the left div and because i set sizing to expand it doesn’t flex like i expected.The dropdown and the heading are not flexing at the start now ; should i just use margin/padding on the heading/dropdown elements to fix that? or maybe positioning