FlexFrog Blog
Essays on CSS flexbox, layout, and the browser box model.
- subgrid is not flex, but people keep confusing them —
Subgrid lets a child grid inherit its parent grid’s tracks. Flex has no equivalent, and that absence is the most common reason teams switch a layout from flex to grid.
- column-reverse and the chat scroll-anchor pattern —
A chat window that auto-scrolls to the latest message used to need JavaScript. flex-direction: column-reverse with overflow: auto does it in two CSS declarations.
- safe and unsafe alignment: the keyword that prevents data loss —
When a flex item is bigger than its container, alignment can scroll its content out of reach. The safe and unsafe keywords let you choose which trade-off you want.
- aspect-ratio meets flex: the cleanest media card recipe —
CSS aspect-ratio shipped to all evergreen browsers in 2021. Combined with flex, it removes the padding-bottom hack and the ResizeObserver workarounds.
- the min-width: auto trap —
Flex items have a hidden min-width of auto, set to their content’s minimum size. It is the reason long words and oversized images blow your layout out.
- auto margins in flex are a feature —
margin: auto on a flex item absorbs all the free space along that side. It is the trick behind every "push this one button to the right" layout.
- flex-basis vs width: which one wins —
Set both flex-basis and width on a flex item and one of them silently loses. The rule is simple, but most tutorials get the explanation wrong.
- align-content: the property tutorials skip —
align-content does nothing on a single-line flex container, which is why most tutorials skip it. The moment you wrap, it becomes the only way to control the cross axis.
- flex-wrap and the mythical flex line —
flex-wrap turns a single flex line into many. The spec calls them "flex lines" and they behave less like rows and more like a stack of independent flex containers.
- order considered harmful: when flex visual order breaks tab order —
The flex order property reorders boxes visually but leaves the DOM untouched. Keyboard users tab through the source; sighted users see the reorder. WCAG 1.3.2 calls this a failure.
- gap is the flex property you keep forgetting —
CSS gap landed in flexbox in 2021. It replaces margin hacks, negative margins, and :not(:last-child) selectors with one declaration.
- min-content, max-content, fit-content: the sizing keywords that solve flex overflow —
Flex items overflow when their content cannot shrink below its intrinsic minimum. The CSS intrinsic sizing keywords let you name that minimum explicitly.
- justify-content vs align-items: which axis is which —
The single most-forgotten flexbox rule: justify-content runs along the main axis, align-items runs across the cross axis. Flip flex-direction and everything swaps.
- flex-grow, flex-shrink, flex-basis: the three that actually matter —
The flex shorthand is three properties in a trench coat. Understand what each one does, stop writing flex: 1 and hoping.
- When to reach for Grid instead —
Flexbox is for one-dimensional layout. CSS Grid is for two. Use the one that matches the shape of the thing you are laying out.