Complex layout in CSS has often been a source of frustration. Sometimes, it is possible to use the display: table-*
variants to get the desired effect; but these are far from ideal for nontabular data.
The Flexbox layout module provides us with mechanisms to control the layout of our elements, even when the dimensions of the parent element or viewport may not be known. This makes it ideal for responsive mobile applications. Flexbox enjoys reasonably good support in modern browsers (see http://caniuse.com/#feat=flexbox). Unfortunately, the specification has gone through several iterations, and older browsers implemented the specification at those stages. Anything lower than iOS 6.1 and Android 4.4 uses an older version of the syntax. So, if you plan on supporting either of these, you would have to support multiple versions of the specification. Generally, this isn't difficult; but older versions don't always support the same features. In most browsers, you'll also have...