A Complete Guide to Flexbox

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

CSS Tricks – A Complete Guide to Flexbox >

Published by Bruce Elgort

You’ll find this technology professor – an award-winning instructor at Clark College – working hard to inspire and challenge his students with meaningful web development and programming experiences. With a skinny vanilla latte (no foam) in hand, Bruce loves to tinker and test the boundaries of existing and emerging technologies, to then guide hungry minds through memorable, educational journeys to showcase with passion the ever-evolving innovations of society. An industry leader, Bruce is known for co-developing Elguji’s IdeaJam software, and is recognized by IBM as an ‘IBM Champion’ for being an innovative thought leader in cloud technologies.

%d bloggers like this: