What is Flexbox?
CSS Flexbox is currently the most trending topic amongst the front-end developers these days. For those of you who are wondering what Flexbox is? Is it a new framework to design apps or develop a website? Or is it just the new fad? In reality it’s just pure css to develop brilliant looking web and mobile apps. However, you might be thinking we have CSS already why do we need Flexbox ?
Flexbox is a layout system developed for composing complex applications and webpages. You do not have to include any front-end framework like Bootstrap or skeleton to use Flexbox.
A unique approach to layout creation, alignment of elements and distribution of extra space. Flex stands for flexible, adaptive. Flexboxes are thus flexible elements of the layout. The major benefit of using this architecture is to fill extra space without use of fillers.
Why Flexbox ?
Flexbox is amazing; It overcomes some of the major drawbacks in CSS such as centering elements, float right, left and aligning with proper spacing around the elements; we can do it with CSS but Flexbox makes it very simple.
Let us see why Flexbox getting so much popularity these days.
Flexbox specializes layout consistency, no matter whatever the screen size. We can see below image screen size is different on iPhone and Android yet our elements are placed just exactly same; this is the power of the Flexbox. Similarly, on web pages you can just layout the things exactly same and no matter the website shrink to tablet or mobile.
Benefits of Flexbox
- Include the required css only, not all the extra css that comes with a heavy frameworks
- It’s easy to customize than framework
- No more memorizing and sprinkling around odd class names
- Unless you need to support older versions of I.E, you can start using it today
- It allows for control over layout placement, or you can let the browser do the work
Few Features of Flexbox
It supports the browsers like Chrome 29+, Firefox 28+, Internet Explorer 11+, Opera 17+, Safari 6.1+, Android 4.4+, iOS 7.1+
When not to use Flexbox?
While Flexbox is great for scaling, aligning and reordering elements but avoid using it for websites which fully need support on old browsers like IE 11 or below. It does not support or only partially support on these browsers. If you want to play it safe, you should fall back to other CSS layout methods, such as display: inline-block with float and display: table.
However, if you only target modern browsers, Flexbox is definitely worth a look.
Flexbox is easy to learn and manipulate is very much ready for you to be using in production work. The main advantage of using Flexbox is: you will be able to do more with layouts, and you will write less code to create them.