Flexbox Explained with Animations

Home » Blog » Design » Flexbox Explained with Animations

Flexbox is a fairly new CSS3 layout standard that allows you to have layout elements automatically fit the available space according to layout rules defined in a website’s stylesheet. While as of today still a W3C Candidate Recommendation Flexbox is already well-supported by all major browsers.

In contrast to tried and true block- or grid-based layouts with Flexbox the onus of defining the exact placement of an element isn’t on the designer but the browser. Flexbox therefore is much more, well, flexible – hence the name – and agnostic of device and screen size in that the browser on the viewer’s device is responsible for making optimal use of the available space according to rules defined by the designer.

Hence, in a way Flexbox can be considered an instance of the idea of design as a second-order affordance described here.

While conceptually simple the details of Flexbox sometimes can be a bit difficult to grasp, especially when you’re coming from a grid-based layout perspective.

This fantastic article does a great job at giving an in-depth explanation of Flexbox using animation for illustrating what you can do with this particular technique and how to do it.

Another highly recommended tutorial for using Flexbox is this Complete Guide to Flexbox by Chris Coyier, published on CSS-Tricks.

About the author: Bjoern
Independent IT consultant, entrepreneur

Leave a Comment