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.

Leave a Comment

* Checkbox GDPR is required


I agree

By continuing to browse the site you agree to our use of cookies. Privacy Policy

Privacy Preference Center

Strictly necessary

These cookies are necessary for the site to function.

PHPSESSID: Preserves user session state across page requests.

__cfduid: Used by the content network, Cloudflare, to identify trusted web traffic.



Remembers the user's submitted data when a comment is submitted in a blog post. The purpose is to aut o-populate form fields for subsequent comments, in order to save time for the user.



Statistic cookies help us to understand how visitors interact with our websites by collecting and reporting information anonymously.

_ga: Registers a unique ID that is used to generate statistical data on how the visitor uses the website.

_gat: Used by Google Analytics to throttle request rate.

_gid: Registers a unique ID that is used to generate statistical data on how the visitor uses the website.

collect: Used to send data to Google Analytics about the visitor's device and behaviour. Tracks the visitor across d evices and marketing channels.



We use Wordfence to secure our website against hacking attempts: https://www.wordfence.com/


Close your account?

Your account will be closed and all data will be permanently deleted and cannot be recovered. Are you sure?