Design your way

Thursday, May 28, 2015

Web developers have been waiting for a long time for a solution to the lack of proper layout mechanisms in CSS. Although there have been additions to the language – transitions, animations, filters etc, none of these have gone far enough in addressing the real issues. However, now a solution has been developed: Flexbox.

So what is Flexbox? Its real name is the CSS3 Flexible Box and it has been developed specifically to address the issue of the unpredictability of elements under different circumstances. This means that if a page is viewed on devices with different sized screens or layouts, the elements will continue to behave in a predictable manner with a consistency of layout.

When compared to the block model, this new flexible model has a benefit in many applications because it does not require the use of floats and it prevents the problem of the collapse of content margins.

Flexbox is certainly user friendly, with its easy to use flexible dimensions that can be placed in any direction and can accommodate any size or shape of display space. This enables a much easier process of achieving complex layouts and requires much simpler coding since the display elements’ source code ordering and their display order are completely independent of each other.

Because floats were originally designed primarily for the purpose of wrapping text around images, Flexbox is one of the first CSS modules that has been designed specifically to address issues with layout.

Optimized to work with UI layout, it is key to finally being able to accomplish some tasks that were previously impossible and makes other tasks considerably more simple to achieve. Thanks to Flexbox, elements can easily be centered both horizontally and vertically as well as allowing for elements to both expand and contract as the layout requires in order to take up the available room. This is on top of its independence from source-code layout.

Flexbox is indeed truly flexible. Although on first contact its syntax may be more than a little confusing, once you get to grips with it you will find that it is capable of adapting visual order by squeezing, stretching or changing it as required.

It can even cope with vertical centering and equal heights. You will find that Flexbox is a useful and adaptable tool that will revolutionize web development and make life easier for developers as well as being a pleasure to use.

In order for you to have a better picture about Flexbox, I gathered some of the best articles that I could find on this subject.