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

Who I Am

I didn't craft malicious hacks in my dad's garage. I didn't start a band there, either. That's where I learned about cars, though. The band was around that time, too - but in my high-school's basement. The hacks came later.

I was 9 when Unix was created. It was not until I was 39, however, that I really understood and used it.

I studied teaching, and practiced some. Some young people still say they are grateful to me for initiating them into the mysteries of the English language. I hope they are honest.

I practiced journalism - and studied some. When the Berlin wall fell and communism in Eastern Europe crumbled, I was spreading propaganda for the Bulgarian National Radio. Later on, a three-month gig with the Voice of America evened the odds.

I got a Masters in Journalism - and became a Web developer. I wrote a lot of decent front-end code during my 11-year tenure with Cars.com. Some of that code is still on the site, years after my departure. It's not the beauty of my code, they just forgot to update or remove some sections.

I spent four years at Sears, working on a different project every year - ServiceLive.com, SearsCommercial.com, Sears Mobile and Sears.com itself. When I interviewed with Orbitz later on, a senior manager asked me, "How did you last 4 years at Sears?!"

At Networked Insights, I led a team of four talented UI engineers in overhauling their SocialSense (now Kairos) marketing analytics platform - we gave it a modern look and a rich collection of data visualization widgets. The company thanked me by laying me off when it hit hard times.

A month after I started at Orbitz, it got bought by Expedia. In the lull of the transition I thought I'd start a new Web-UI tech blog.
I tried this in the past and didn't get far: http://dev.stoicheff.com.