I'm happy to announce that my CoDe Magazine article Flexing your HTML Layout Muscles with Flexbox is now out in the March and April issue:

FlexBox – why now?

I've been on Flexbox kick in the last half a year. I've been a reluctantant – or perhaps lazy – adopter of Flexbox. I've looked at Flexbox a few times in the past but was always put off by the lack of browser support, the quirky behavior between different browsers and the nomenclature that you have to learn and understand. But all that has changed in the last year or so, with all major browsers now supporting the latest Flexbox standard and behavior across browsers being fairly consistent. Flexbox syntax is definitely different and requires thinking about some new containership concepts that are not very well expressed in the Flexbox lingo (IMHO). But, while there are endless combinations for containership rendering with Flexbox, the actual vocabulary of CSS tags is relatively small. In fact, at the end of the article I have a table with the 12 tags that are available. Once I figured out the basic Flexbox concepts, it wasn't too difficult to remember the relevant tags that you typically deal with. As is usually the case, all it took is making a commitment to using the technology and the rest came easy. Now I can't imagine working without it anymore.

Flexbox has really changed my HTML design drastically. I'm no designer (said every developer ever) but with Flexbox I can at least manage my containership much easier. Building your typical 3 or 5 panel layouts becomes easy. Flexbox has especially been useful for complex SPA applications that display lots of data. Data entry forms are much easier to flow properly, even with responsive or mobile first design in mind.

Anyways – if you haven't looked at Flexbox before or you're still using tables to layout horizontal flow of pages then this article is to you. If you're already using FlexBox there's probably not a lot of news for you there, but you might enjoy the CodePen examples linked in the article that demonstrate a few common use cases where FlexBox really makes life easier.

Resources

• Flexing your HTML Layout Muscles with Flexbox