What's your project about ?

26 January 2024

From Absolute Positioning to Flexbox for Header Layouts

Today, I tackled updating our website's header, which involved moving away from the old-school absolute positioning to a more modern and efficient flexbox layout. The header is divided into three parts: social links on the left, a central logo, and navigation links on the right.
 
The project from which the post is extracted uses Tailwind CSS, so I use it as well. For beginners, TailwindCSS is a CSS framework that allows developers to write CSS directly in HTML.

The Old Approach:
The legacy code used absolute positioning, which often felt like a past hack and caused issues with fitting the logo correctly. Absolute positioning can be inflexible, leading to layout challenges, especially in responsive design.

Old code based on absolute position


Transition to Flexbox:
To resolve these issues, I embraced flexbox. By wrapping the User menu component in a div and applying "flex flex-1" to the first and last divs, I managed to nudge the logo into perfect center alignment. This approach allows elements to adjust based on their neighboring items, making the layout more dynamic and responsive. Simplifying the classes on the logo also contributed to a cleaner layout.

New code with only Flexbox properties



Conclusion:
The switch to flexbox not only made the header more adaptable but also the code more straightforward and maintainable. Obviously, absolute positioning is not evil, and it's good to use it when meaningful. I only give my preference to flexbox positioning over absolute positioning for its flexibility and ease of use.

I hope you find this insight into transitioning to flexbox useful for your web design endeavors!