In the beginning there was the
<table> tag, and for every layout there was a table structure to wrap it. I remember wading through nested tables on sites, amazed that yes, that
<td> up on line 4 does in fact close down at line 652.
Then there came the grid systems, cleverly designed css kits that relied on one of two techniques, display: table-cell or floats. Floats should never be used for layout ever, as they will almost always do the wrong thing. Display table isn't that bad, other than that gnawing feeling that your still thinking in tables, and managing widths of cells based on percentages. There were even some js kits that claimed to handle layout for you, but left you feeling hollow inside.
Flexbox is a pure CSS solution that runs without vendor prefixing in IE11, Webkit and Firefox. If you need to cover IE10, try sass-flex-mixins, which will shim the old spec and do the prefixing for you. There is an initial learning curve, but what I found is not that Flexbox has a curve is that your understanding of what you want to do needs more rigor.
The following resources are absolutely essential, but it all boils down to this. When you put display:flex on a tag, it becomes a logical flex container, and immediately all of the first generation children become flex children. Some flex properties apply to the container, and some to the children. The container properties decide the direction - column, or row. The child properties define how much space this container takes up in relation to its siblings, how they grow and stack, and the alignment of items within those containers - top, bottom,left, and right. You don't have to worry about embarrassing floats to clear, or hacky line-height tricks to vertically center.
You don't have to stop using this for page grids either, you can use it for form layout, or sub-layouts within widgets. Anytime you have to do 50 /50 splits with left / right alignment, or thirds with left, center, right, you can use flexbox with zero hassle.
And since it's pure css, all your @media queries work perfectly. Think flex-direction row for desktop, and flex-direction column for mobile. We finally have a way to achieve pixel perfect alignment and justification, which gives your app that perfectly laid out and balanced feel. I recommend firing up a codepen and playing in a small sandbox, and give it a try on your next app.