Since the advent of mobile devices and the massive adoption of these devices by users, developers have had to build websites that adapt well to different screen sizes. There are various methods to employ in responsive design, but layout was the most tricky—until Flexbox.

Before Flexbox: Using Floats and Positioning

Before Flexbox, developers relied on CSS floats, inline-block, and absolute positioning to create layouts. These methods worked but often required extra markup, clearfix hacks, and tricky positioning adjustments.

Example: A Simple Two-Column Layout Using Floats 

</span>
 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    Float Layout
    
        .container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            overflow: hidden; /* clearfix to contain floated elements */
        }
        .left-column {
            width: 70%;
            float: left;
            background-color: lightblue;
            padding: 20px;
        }
        .right-column {
            width: 30%;
            float: left;
            background-color: lightcoral;
            padding: 20px;
        }
        /* Clearing floats */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    



     class="container clearfix">
         class="left-column">Main Content
         class="right-column">Sidebar
    






    Enter fullscreen mode
    


    Exit fullscreen mode
    




This method had problems:
It required clearfix hacks to prevent layout breaking.
Columns could collapse if their content exceeded the available space.
Reordering elements required complex DOM changes.

  
  
  Example: Centering an Element Using position: absolute

</span>
 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    Absolute Centering
    
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            background-color: lightgray;
        }
        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: teal;
            padding: 20px;
            color: white;
        }
    



     class="container">
         class="box">Centered Box
    






    Enter fullscreen mode
    


    Exit fullscreen mode
    




While this method works, it requires absolute positioning and transform hacks, making responsive adjustments harder.
  
  
  How Flexbox Simplifies Layouts
With Flexbox, you can easily create complex layouts without floats or positioning hacks. It provides properties for alignment, distribution, and responsiveness.
  
  
  Example: Two-Column Layout Using Flexbox

</span>
 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    Flexbox Layout
    
        .container {
            display: flex;
            max-width: 800px;
            margin: auto;
        }
        .left-column {
            flex: 2; /* Takes up more space */
            background-color: lightblue;
            padding: 20px;
        }
        .right-column {
            flex: 1; /* Takes up less space */
            background-color: lightcoral;
            padding: 20px;
        }
    



     class="container">
         class="left-column">Main Content
         class="right-column">Sidebar
    






    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Why is this better?

No need for clearfix hacks

Automatic element sizing (no need for fixed widths)

Easier responsiveness (use flex-wrap to stack columns on smaller screens)

  
  
  Example: Centering with Flexbox

</span>
 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    Flexbox Centering
    
        .container {
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            height: 100vh;
            background-color: lightgray;
        }
        .box {
            background-color: teal;
            padding: 20px;
            color: white;
        }
    



     class="container">
         class="box">Centered Box
    






    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Why is this better?

No need for absolute positioning

No transform hacks
Works dynamically without recalculating margins

  
  
  Example: Responsive Flexbox Layout

</span>
 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    Responsive Flexbox
    
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .box {
            flex: 1;
            min-width: 200px;
            background-color: salmon;
            padding: 20px;
            text-align: center;
        }
    



     class="container">
         class="box">Box 1
         class="box">Box 2
         class="box">Box 3
    






    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Why is this better?


flex-wrap ensures responsiveness (boxes stack when screen shrinks)

gap provides spacing without extra margins
No complex media queries needed

  
  
  Conclusion
Before Flexbox, layouts relied on floats, positioning, and inline-block hacks, making responsiveness difficult. Flexbox eliminates these problems by providing a more intuitive and powerful way to align and distribute elements.
The next time you feel overwhelmed by Responsive design, just remember flexbox.
What are your thoughts on this.I'm a full stack JS/TS developer available for hire. Feel free to reach out to me for your next project