✳flâneur — a map of the web's best reading

An Interactive Guide to Flexbox in CSS • Josh W. Comeau

joshwcomeau.com · 5,850 words · saved by 1 readers

Flexbox is a remarkably powerful layout mode. When we truly understand how it works, we can build dynamic layouts that respond automatically, rearranging themselves as-needed. For example, check this out: This demo is heavily inspired by Adam Argyle’s incredible “4 layouts for the price of 1” (opens in new tab) codepen. It uses no media/container queries. Instead of setting arbitrary breakpoints, it uses fluid principles to create a layout that flows seamlessly. Here's the relevant CSS: I remember running into demos like this and being completely baffled. I knew the basics of Flexbox, but this seemed like absolute wizardry! In this blog post, I want to refine your mental model for Flexbox. We'll build an intuition for how the Flexbox algorithm works, by learning about each of these properties. Whether you're a CSS beginner, or you've been using Flexbox for years, I bet you'll learn quite a bit! Let's do this! I make a food-related metaphor later in this tutorial. This tutorial feature

Introduction Flexbox is a remarkably powerful layout mode. When we truly understand how it works, we can build dynamic layouts that respond automatically, rearranging themselves as-needed. For example, check this out: Container width : 600 Drag me! Name: Email: Submit This demo is heavily inspired by Adam Argyle’s incredible “4 layouts for the price of 1” (opens in new tab) codepen. It uses no media/container queries. Instead of setting arbitrary breakpoints, it uses fluid principles to create a layout that flows seamlessly. Here's the relevant CSS: Copy to clipboard form { display : flex ; al

Explore this link on the map →

saved by

related reading