What are the main advantages of using flex style in CSS?

Question 1

I had hardly seen any site using flex for responsiveness.

enter image description here

Source from CanIUse

CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit; Internet Explorer implements an old version of the spec, prefixed; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

Flex Box

The new flexbox layout mode is poised to redefine how we do layouts in CSS. Unfortunately the specification has changed a lot recently, so it's implemented differently in different browsers. There are a lot of out-of-date flexbox resources around.

Flexbox Has Many Exciting Features, As It

can be laid out in any flow direction (leftwards, rightwards, downwards, or even upwards!)
can have display order reversed or rearranged at the style layer (i.e., visual order can be independent of source and speech order)
can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
can “flex” their sizes to respond to the available space
can be aligned with respect to their container or each other
can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size.

The Problem With The Old Box Model

Consider the following code for use with a three column layout.

.col {
    width: 33.33%;
    padding: 0 5%;
}

That won’t actually give you columns that are 33.33% wide, it will create columns that are 43.33% wide. This will break the 3 column layout because the combined width of the columns exceed 100%. In other words, the padding is added to the already existing width. So it’s padding + width.

If you need to create a 3 column layout you typically use float (or inline-block), and then figure out the necessary widths, paddings and margins so they fit inside the parent container. It’s an unecessary amount of work that it’d be nice to avoid, even if it has become second nature by now.

I found a good tutorial for the current status of the implementation of Flexbox here.

Known Issues from CanIUse

Firefox does not support specifying widths in percentages. See bug.
IE10 and IE11 default values for flex are 0 0 auto (see here) rather than 0 1 auto, as per the draft spec, as of September 2013.
Firefox does not support flex-wrap, align-content properties. See bug
In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property. See bug.
In Chrome and Safari, the height of (non flex) children are not recognized in percentages. However Firefox and IE recognize and scale the children based on percentage heights.

References

Question 2

What is flexbox?

Flexbox definition as stated in W3C specs:

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

It's worth noting that flexbox is not just one property but whole module with set of properties that affect flow and positioning of elements inside of parent element (usually some kind of wrapper div) once it is defined as flex container. This is done by using display: flex.

enter image description here

Resources on flexbox:

Advantages

Flebox allows us to have more control over aligment and behavior of boxes/divs/page elements when changing screen sizes or device orientation.

Without flexbox, methods for achieving flexible layout are:

floats - basically a hack since it's original use is to allow parts of the content to change position without removing them from document flow (ie. positioning images around text). They are mostly used for horizontal stacking often in conjuction with media queries and clearfix hack.
relative units (% or em) for sizing - in most cases works well for horizontal layout but offers no or little control for vertical alignment.
media queries - used in conjunction with upper techniques MQ make staple of RWD but in more complex cases tend to became messy since every query has to contain all properties that affect size and position of element we want to adjust (width, height, padding, margins, display etc.).
javascript - dynamically changing elements properties based on other variables. Also hacky solution, often not very clean, taxing on page size and performance and obivusly JS dependant.

Flexbox, in part, is "shorthanding" combinations of methods listed above but also has three distinctive advantages:

setting flexible width/height of elements depending on available space
both vertical and horizontal centering without any hacks and workaround solutions
altering order of elements inside layout without affecting markup and document structure (using either order property or flex-flow).

For more concrete examples please check links listed at the end of this answer.

Syntax and browser support

Over time, there where some major changes regarding flexbox syntax across various browsers that are pretty well explained in this article but with wide adoption of prefixing tools like autoprefixer we can just stick to the latest standard syntax and automate prefixing (autoprefixer offers option to define how far back we want to go regarding browser support).

That said, flexbox is supported in all major browsers except IE 9 and lower. Opera supports flexbox since version 12.1 and offers no support on Opera Mini (what a shock). For many existing sites, using flexbox probably means a lot of work for limited benefits but as IE 8 and 9 usage drops flexbox implementation will grow.

When and how should be used?

As pointed out in this article flexbox isn't meant to be used for creating full page layouts (for that purpuse there is css grid module currently in works and funny enough, supported only by IE) but to manipulate smaller individual components like navigations and sidebar elements.

For now you could probably detect support via modernizer and do fallback for IE lte 9 or go fallback-first by sticking to universal working basics and expand upon them to offer better experiences on browsers that can handle it (I would recommend the latter). As always, it will depend on specific project requirements and visitor profile should flexbox be used at all or not.

Usage examples

I don't have any real life examples of flexbox use, but here are some links for use cases easily solvable by using flexbox:

Question 3

The best or biggest advantage of FlexBox is the flexibility and the fact that the browser will calculate most of things for us with a minimal and easy setup or coding.

Today most websites use float for the design, but that is really just a hack, because floating was supposed to be just a way to surround an image by text as in any newspaper. But it became so normal that we think of it as the rule. It is like when web designers used tables for design; it was not supposed to be for that.

With FlexBox you can do your Faux Columns easy and "in real", you can set one (or more) fixed column and another one (or more) flexible without using hacks like the overflowing-float combination —it handles the available space very well— you can rearrange the order of elements by just changing a number —which will be very cool and useful in combination with RWD— or even justify content without using a lot of hacks for different scenarios (display:inline-block, float & translate, etc).

So there is really nothing new we can do in the end, because we have found over the years a lot of ways to handle/hack our needs, but with FlexBox we will have a specific tool to do most of those sick techniques in a proper way. I think a good example is how we have done in the past rounded corners with four divs and today we just use border-radius. So, finally, we save time and get a cleaner code.

I think (hope?) this year we will see an important increase of the use of FlexBox, since the end of XP is right here and IE8 will die —and I think users will upgrade to another Windows version with IE10/11.

Question 4

I'd say that the Flexible Box Layout Module's main advantage is that it calculates everything for you. You don't need to calculate how much space an element will take up with margins, padding, etc. Its done automatically.

Question 5

A standard user interface component set
Remoting (the ability to interface with web services via transferring typed objects)
A better skinning and styling workflow (than HTML/CSS at the time)
Efficient vector graphics for data visualization (charts, graphs, etc)

Question 6

Great for listing especially on e-commercial sites or sites based on products like bookstores, etc. Let's say you have 600x600 px display area for your products to be listed. Each product box has dynamic width due to product image inside, horizontal or vertical. Flex arranges these boxes so nicely, it drops not fitting boxes below and arranges remaining box widths and heights.

For browser support, w3schools states

The box-flex property is only supported by Opera.

Internet Explorer 10 supports an alternative, the -ms-flex property.

Firefox supports an alternative, the -moz-box-flex property.

Safari and Chrome support an alternative, the -webkit-box-flex property.

Note: Flexible boxes are not supported in Internet Explorer 9 and earlier versions.

Question 7

I went through some posts and my pick was 'Using Flexbox', from Chris Coyier's CSS-Tricks. http://css-tricks.com/using-flexbox/ The article gives a great breakdown of exactly what you need to do to get Flexbox working in as many browsers as possible. Under the Browser Support subheading, it gives us the supported list of browsers, obviously, with the caveat of, 'If you do all this weaving, you can get':

Chrome Firefox Safari Opera (12.1+) IE (10+) iOS Android

If we're going to build layouts for the browsers that don't support Flexbox, we have to cater for them in the way we used to. Technically, this is the way we currently do things: using percentages, ems and floats combined with media queries to create flexible layouts that work across a multitude of devices, not only consisting of the smartphones and tablets we use today.