At time of print, flexbox is not a new thing is CSS. You can get a large number of articles excitedly talking about it from three or four years ago. I now rate it as stable technology, which should be deployable without issue. It has enough support that you can use it to improve customers user-journeys, rather than awkwardly fail.

Sensible use

i.e. your CSS framework. If you have no CSS framework?, fix this first.

  • Decent docs for Foundation framework 1
  • Also good docs, for Bootstrap 2
  • flexigrid 3 ~ single use library...
  • Frow 4 ~ and another
  • A toy 5 to play with settings, and see what works on specific browsers.
  • and probably many more. This list is just so that my code sample at the end doesn't seem to support bad practice.

Things to consider

  • Has decent support for vertical alignments 6 7. The code samples on the second link is better, although less well presented, and probably has less browser support. This is worth whatever the transition cost is its own right.
  • If you use enough variants, flexbox is completely supported by 94% of browsers 8, and partially supported by most of the remaining 6%. This makes it more stable than all previous technologies and hacks for the same objective. A context reference 9
  • This should be used with screen units (which are basically percentages... with adaption for changing orientation) and em. Quite a few frameworks are using em, as it leads to more readable designs.
  • When people on [XXX] 'dows laptops make everything supersize, and so small amount of things per screen-full. Flexbox will tend to work.
  • Some notes say the shortform flexbox render faster 10. I haven't tested this statement.
  • Some care needs to be invested, to have a page that packs well on desktop and mobile; read 11. As ever knowing your current audience and your desired audience is important prerequisite. I normally do this by tactically setting display to block on a maximum width; but there are better solutions. Whilst you can have 80% of your screen empty (i.e. a badly organised mobile layout on a desktop screen), its abit wasteful, and if the user wanted to look at empty space, the wall behind is easier.

Prototype Toy

As a minimum, not recommended for industrial use:

.table .tr  { text-align:center; display:flex; flex-flow: row nowrap; width:100%; }
.table .tr .td { text-align:center;  justify-content: space-between; flex-grow: 1; flex-basis: 0; flex:1; padding:0.5em; }
/* the 3rd column needs more space */
.table .tr .td:nth-child(3) { flex:2; }
.table .thead { /* ... */ }