Flex Box Explained with Animations

Home » Blog » Design » Flex Box Explained with Animations

Flex Box 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 Flex Box is already well-supported by all major browsers.

In contrast to tried and true block- or grid-based layouts with Flex Box the onus of defining the exact placement of an element isn’t on the designer but the browser. Flex Box 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 Flex Box can be considered an instance of the idea of design as a second-order affordance described here.

While conceptually simple the details of Flex Box 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 Flex Box using animation for illustrating what you can do with this particular technique and how to do it.

Another highly recommended tutorial for using Flex Box is this visual guide.

About the author: Bjoern
Independent IT consultant, entrepreneur

Leave a Comment