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.

A Visual Guide to CSS3 Flexbox Properties

A Visual Guide to CSS3 Flexbox Properties

Using Flexbox today

Using Flexbox today

Flexbox adventures

Flexbox adventures

A Complete Guide to Flexbox

A Complete Guide to Flexbox

Flexbox Cheatsheet Cheatsheet

Flexbox Cheatsheet Cheatsheet

flexbox in 5 minutes

flexbox in 5 minutes

Solved by Flexbox

Solved by Flexbox

Enhancing Responsiveness with Flexbox

Enhancing Responsiveness with Flexbox presentation at RWD Summit

Harnessing Flexbox For Today’s Web Apps

Harnessing Flexbox For Today’s Web Apps

CSS Vertical Center with Flexbox

CSS Vertical Center with Flexbox

Flexbox: The Next Generation of CSS Layout Has Arrived

Flexbox: The Next Generation of CSS Layout Has Arrived

Tricks with Flexbox for Better CSS Patterns

Tricks with Flexbox for Better CSS Patterns

Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback

Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback

A Designer’s Guide To Flexbox: Understanding Visual Weight

A Designer’s Guide To Flexbox: Understanding Visual Weight

Flexbox in the Real World

Flexbox in the Real World

Full-width pinned layouts with flexbox

Full-width pinned layouts with flexbox

Modern Masonry with Flexbox and JavaScript

Modern Masonry with Flexbox and JavaScript

S-Grid – Working with Flexible Box layouts

S-Grid - Working with Flexible Box layouts

Working with flexbox: The new specification

Working with flexbox: The new specification

Flexbox Nav Bar with Fixed, Variable, and Take-Up-The-Rest Elements

Flexbox Nav Bar with Fixed, Variable, and Take-Up-The-Rest Elements

Normalizing Cross-browser Flexbox Bugs

Normalizing Cross-browser Flexbox Bugs

Flexbox Cross-Browser Inconsistencies

Flexbox Cross-Browser Inconsistencies

Morten Rand-Hendriksen: Future Responsive Today – Embracing mobile-first with ‘picture’ and FlexBox

Morten Rand-Hendriksen: Future Responsive Today – Embracing mobile-first with picture and FlexBox

Flexbox Grid

Flexbox Grid



Source: http://ift.tt/1d1lozi

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading