Using Flexbox And The Many Advantages To It

This is not a tutorial by any means. I only attempt to sell you on the benefits of adopting Flexbox into your everyday designs. It does not matter what CMS you use, the theme or the existing markup because the manner in which flexbox works allows you to do a lot of things.

The best way to understand why you should learn Flexbox right now is to point out things that are difficult without Flexbox.

  • Making any element horizontally center align previously required a combination of things. And if you work on a CMS, it matters as to the existing code you write your CSS into. With Flexbox, this is a simple task and you can intuitively center elements without losing mobile optimization.
  • Vertical alignment was difficult previously and the most used work around was relying on tables. Doing the same with div required a lot of coding. With Flexbox, it is super easy to vertically align things using a few code lines every single time.
  • The browsers now understand what you want to achieve if you use Flexbox. Want content to grow because you have a lot of it? Flexbox provides this option to you. Want to order columns depending on the device and viewport? Flexbox makes that easy too.
  • With Flexbox you can position and play with anything as you wish. Layouts are so much easier and flexbox works great with absolute positioning rather well.

Now that you know the various practical areas where Flexbox comes handy, it is time to highlight the advantages I have felt thus far.

Firstly, Flexbox markup is pretty simple and it works regardless of the existing markup or that of the parent elements. If you can combine Flexbox with JQuery or JavaScript, you can do some amazing stuff that previously required a lot of JQuery or browser side coding.

Second, learning Flexbox does not take time and integrating it takes even lesser time. One day and some practice is all you need to master Flexbox. If you already have a decent grasp over frontend programming, then Flexbox should be rather easy to understand.

Third, nearly 90% browsers used today support all aspects of Flexbox. This basically means that fallbacks are not that necessary so long as you stick with the order of things in your mark-up.

Leave a Reply

Your email address will not be published. Required fields are marked *