CSS3 Flexbox Layout

Every so often I keep asking myself, "Is it time yet to start using the CSS3 flexbox layout?" I'd love to push all those complex layout models, handcrafted or stolen, closer to the edge of oblivion.
I've read articles, primers and "complete" guidelines. My impression is that while UI developers are excited about Flexbox as a better approach to arrange components to fit the available space on a page, regardless of screen size or orientation, the painfully familiar refrain "It won't work in IE 9/8/7" has been stopping them.

However, if we agree that the browser versions UI engineers should really be concerned with are the latest one and the one before it (my "latest - 1" rule), then I think it's time. Microsoft Edge and IE 11 have full support for Flexbox, and the others have had it for a while.

Last year, I started experimenting with some simple layouts: http://css3-flexbox.herokuapp.com/.
Then I abandoned the exercise, as more urgent projects consumed my time. Now I picked up where I had left off, and my goal was to extract just the flex layout rules into a separate CSS file, then gradually expand it to handle more complex layouts.

Most if not all of the examples I've seen on the Web have the flex rules interspersed with other rules and properties, which makes it harder to sift through the examples and pull out just what you went there looking for.

So I redid the above page (http://css3-flexbox.herokuapp.com/) and pulled out all flex rules into flexbox.css as planned.

It's quite simple - here is all the code I ended up with:

.flex-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.flex-container-column {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flex-container-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: initial;
}

.flex-item-row {
    width: 98%;
}

.flex-item-col-4 {
    flex-basis: 22%;
    /* takes into account margins and paddings, can't really be 25% */
    /* failover rules for old IEs, don't affect the flex display in any way */
    width: 22%;
    float: left;
}

This can be simplified even further, but for now I've decided to avoid the shortcuts.

The above code handles a four-column layout and a row layout. it works in all modern browsers. For the older IEs, I added the traditional float: left; and specified the elements' width, which works well enough, while not affecting the flex rules in any way.

Then I thought I should try and validate this CSS snippet by laying out an actual page or collection - so I did. Check this out: http://flightseek.herokuapp.com/find
This is an exercise in creating a basic flight search tool, using the Expedia mobile APIs. You won't be able to book a flight with it, but the data is current.

Here are some good resources for further reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://www.w3schools.com/css/css3_flexbox.asp