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
.

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: