Web Development Examples by Andria Bird


Flexbox Infographic

I was pretty unfamiliar with Flexbox before starting this research and I wanted to understand who designed it and why. After some digging, I found that Flexbox was designed to make developers’ lives easier by cutting out all the CSS float/tables/display properties that you had to incorporate into your code to manipulate page layouts. CSS3 introduced two new layout methods as an alternative: Grid layout and Flexbox layout. It seems the Grid layout is still under construction and is not ready for use yet. The Flexbox layout, however, is enjoying great browser support these days. According to Tab Atkins Jr., author of the Flexbox and Grid specs, “My goal in doing Flexbox and later Grid was to replace all the crazy float/table/inline-block/etc hacks that I’d had to master as a webdev. All that crap was (a) stupid, (b) hard to remember, and (c) limited in a million annoying ways, so I wanted to make a few well-done layout modules that solved the same problems in simple, easy-to-use, and complete ways. (Atkins)”

The Flexbox layout provides a more reliable way to align and distribute space among items in a container, despite items’ size being unknown. This is where it got it’s name, actually as the “flex” in flexbox suggests that your pages should be flexible and resize content to fit to the many different screen sizes and resolutions that are being used. A flex container expands items to fill available free space, or shrinks items to prevent page overflow. Flexbox layouts go in one direction, either horizontal or vertical and can be referred to on an x or y axis. Chris Coyier of the developer blog css-tricks.com notes that “ Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts. (Coyier)”