Top reasons to use Material 2 flex layout

Flexbox is a layout mode in CSS3 to quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. Flexbox is easy to learn and powerful to use. Being a hardcore Bootstrap fanatic, I was wondering what more does Flexbox provide. Bootstrap offers the kind of the same functions with their grid systems. Then why use Flexbox?

1. Bootstrap uses floats, needs clear fix after each row, and there’s always a chance you’ll get misaligned divs of different height. Flexbox doesn’t do that. Instead, it checks for the tallest div in the container and sticks to its height. Bootstrap uses Flex layout as well, but the bootstrap framework contains predefined CSS code. So we have to overwrite the core files which results in an increase in the file size.

2. It helps in displaying the elements on the page as per the device size; screen size in available space and improve the items alignment, directions, order, scaling and re-ordering elements within a container.

HTML Part :

    <div fxLayout="row" fxLayoutAlign="center center">  
     <md-card fxFlex="50%">
      <div fxLayout="row" fxLayoutAlign="center center" class="div1">
       <p>DIV1[text align center]</p>
      </div>
      <div fxLayout="row" fxLayoutAlign="space-around center" class="div2" fxLayout.xs="column">
       <p>DIV2 [space around center]</p>
       <p>DIV2 [space around center]</p>
       <p>DIV2 [space around center]</p>
      </div>
      <div fxFlex="100%" fxLayoutAlign="center center" class="div5">
       <p>DIV5 [text align end]</p>
      </div>
     </md-card>
    </div>  

CSS Part :

    .div1, .div2, .div3, .div4,.div5 {
      color: white;
     }
    .div1 {
      background: red; 
    }
    .div2 { 
      background: rgba(216, 160, 179, 0.88);
    }
    .div5 {
      background: rgba(179, 9, 9, 0.88); 
    }

3. Positioning of the elements is simpler thus more complex layouts can be achieved with less code.

    <div fxLayout="row" fxLayoutAlign="center center">  
     <md-card fxFlex="50%">
      <div fxLayout="row" fxLayoutAlign="space-around center" class="div2" fxLayout.xs="column">
       <p>DIV2 [space around center]</p>
       <p>DIV2 [space around center]</p>
       <p>DIV2 [space around center]</p>
      </div>
     </md-card>
    </div>

4. Bootstrap is time consuming. By using flex layout, there isn’t a need to write more styles (CSS).

    <div fxLayout="row" fxLayoutAlign="center center">  
     <md-card fxFlex="50%">
      <div fxLayout="row"> 
       <div fxLayout="row" fxLayoutAlign="space-around center"> 
        <p>DIV1 [space around center]</p>
       </div>
       <div fxLayout="row" fxLayoutAlign="space-between" > 
        <p>DIV2 [space-between]</p>
       </div>
       <div fxLayout="row" fxLayoutAlign="end end" > 
        <p>DIV3 [space around center]</p>
       </div>
      </div>
     </md-card>
    </div>  

5. Flex supports all browsers

6. Flex Layout doesn’t use floats. We can align elements easily using,

<pre>fxLayoutAlign ="center"
fxLayoutAlign ="start"
fxLayoutAlign ="end"
</pre>

7. Flexbox doesn’t need any extra framework or library.

For example, using Pure CSS

HTML Part :

    <div class="main-container">  
     <div class="div1 div1-color">
      <p>DIV1 [ Text align center ]</p>
     </div>
     <div class="div-row2">
      <div class="div2">
       <p>DIV2 [ space around center ]</p>
      </div>
      <div class="div3">
       <p>DIV3 [ space around  center ]</p>
      </div>
      <div class="div4">
       <p>DIV4 [ space around  center ]</p>
      </div>
     </div>
     <div class="div-row3">
      <div class="div5">
       <p>DIV5 [ text align left ]</p>
      </div>
      <div class="div6">
       <p>DIV6 [ text align right ]</p>
      </div>
     </div>
     <div class="div1 div-color">
      <p>DIV7 [ Text align center ]</p>
     </div>
    </div>  

CSS Part :

    .main-container {
      width: 50%;
      margin: 0 auto;
      padding: 24px;
      box-shadow: 0 3px 1px -     2px rgba(0,0,0,.2), 0 2px 
      2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
      min-height: 200px;
    }
    .div1, .div-row2, .div-row3 {
       width: 100%;
       float: left;
      }
    .div1-color {
       background: #FF0000;
    }
    .div1 p, .div2 p, .div3 p, .div4 p {
       text-align: center;
       color: white;
    }
    .div5 p {
       color: white;
    }
    .div6 p {
       color: white;
    }
    .div2, .div3, .div4 {
       width: 32%;
       float: left;
    }
    .div-row2 {
       background: #DCABBC;
    }
    .div5 {
       width: 70%;
       float: left;
       background: #5A945C;
    }
    .div6 {
       width: 30%;
       float: left;
       background: #DE723E;
    }
    .div-color {
       background: #BC2525;
    }
    @media (max-width: 991px) {
     .main-container {
        width: 80%;
      }
     }
    @media (max-width: 767px) {
     .div5, .div6  {
        width: 50%;
      }
      .div5 p, .div6 p {
         text-align: center;
      }
      .main-container {
         min-height: 220px;
      }
    }
    @media (max-width: 480px) {
     .div5, .div6, .div2, .div3, .div4 {
        width: 100%;
      }
     .main-container {
        min-height: 351px;
      }
    }
    @media (min-width: 991px) and (max-width: 1200px) {
     .main-container {
         width: 71%;
      }
    }

Clearly, pure CSS results in long and complex code. Flex layout makes the website responsive without any media query. I’m convinced of the power of Flexbox. And this is what I’ll be using moving forward. I urge our readers to give Flexbox a chance, it will change the way you create sites.

If you want to learn more about how to build “Lightning Fast” websites, take a look at Roadmap to Lightning Fast Websites.