What is flexbox and why it is going to change forever the way web applications are developed
Flexbox or CSS Flexible Box Layout Module is a layout mode used almost exclusively in responsive websites, that provides for a better arrangement of all of the page elements that behave in a predictable mode.
Flexbox accommodates said elements inside flexible boxes (creative name, huh?) ensuring that every feature in your web page is displayed properly, in any screen size or resolution.
The module has been around for a bit over three years now, and by repeatedly proving itself to be an efficient solution to most common deficiencies in modern web development, Flexbox was quickly adopted by a wide portion of the community.
Browser support
With the growth in demand for very specific solutions, most major internet browsers ended up implementing custom Flexbox versions to their framework. However, browsers are frequently going under major updates, and sometimes along with those, changes to the various custom Flexbox frameworks would come along.
Variations to important aspects, like syntaxes and functionalities, have occurred multiple times now since the initial implementations, and it is easy to get lost by relying solely on Google or StackOverflow when trying to learn Flexbox because you will frequently stumble upon outdated information.
Flexbox integration has come a long way, and as of today, browser support comes (http://caniuse.com/#search=flexbox) as it follows:
Edge 13, Firefox 44, Chrome 48, Safari 9, and Opera 34 have total support;
Internet Explorer 11 has only partial support;
Enabling FlexBox on Bootstrap
To get started, swap the default Bootstrap CSS file with the compiled flexbox variation.
Here (http://v4-alpha.getbootstrap.com/getting-started/download/#) is the official download link. This will give you access to the entire flexbox module.
As a module, a lot of different new properties are involved and at first it can be a little confusing for the unfamiliarized. But don’t give up just yet, the tool is actually very practical after getting the hang of it.
How to use it in your Bootstrap Code
Upon activating the flexbox module, you will notice three big changes to your CSS file:
All grid components in your code will switch from float to display: flex;
Input groups will move from display: table; to display: flex;
Media components will go from display: table; to display: flex;
These components that are now under the display: flex; class will be laid across your page in the form of grids, placed inside segregated flex containers.
All those specific elements, or grids, are very easy to customize with flexbox and you can manipulate their layout at will. With Flexbox, previously arduous tasks like vertically aligning your responsive content and reordering your CSS features are now almost trivial.
By using the flex-direction property, for example, you can specify how your grids will be displayed inside the flex container. Accepted values for the flex-direction property are: row, row-reverse, column, and column-reverse.
Examples
Let’s say that you have a container, with three small blocks inside it. Those three blocks by default are stacked up on top of each other inside the containers, and your front page looks like a mess.
After implementing flexbox to your Bootstrap, you can easily organize and customize said blocks, however, it works best for you.
http://codepen.io/carlosafw/pen/pygLyX
As you can see in the example, you can now determine on the class of each div how many spaces will be occupied in each different screen size, and flexbox will organize the page responsivity accordingly automatically. A very efficient solution.
(This article has no conclusion, it was part of an on-going series I had being working on for like a year at this point)
