6 Pure CSS1 with JSPublished 2026-10-05Free · no sign-up
Seven flexbox patterns used everywhere: a navbar where one auto margin pushes links apart, tags that wrap with gap, an input with a prefix and a button, the media object, columns that are truly equal, an alignment playground and a vertical stack spaced by gap.
In a flex row, margin-left: auto on one item pushes it and everything after it to the far end. Here the logo stays left and the sign-in link is pushed right, with no wrapper divs and no space-between guessing.
Tags that wrap onto new lines as space runs out, with even spacing in both directions from a single gap property. Before gap worked in flexbox this needed negative margins on the container; now it is one line.
A URL field with a fixed prefix, a flexible input and a button, all in one flex row. The input has flex: 1 and min-width: 0, which lets it shrink below its default size instead of pushing the button out of the box.
The media object: an image or avatar on one side and text that wraps beside it, never under it. The image is flex: none so it keeps its size, the text block is flex: 1 with min-width: 0 so long words wrap instead of overflowing.
View code
<article class="fx4"><span class="av" aria-hidden="true">KO</span><div><b>Kemi Oduya</b><p>Replied to your comment on Spring launch checklist: Let's move the email to Thursday so the photos are ready.</p></div></article>
flex: 1 alone can make columns different widths, because the content's size is added before the free space is shared. flex: 1 1 0 starts every item from zero, so the columns come out equal whatever is inside them. The two rows compare both.
View code
<div class="fx5"><p>flex: 1 1 auto</p><div class="r auto"><span>A</span><span>A much longer label</span><span>B</span></div><p>flex: 1 1 0</p><div class="r zero"><span>A</span><span>A much longer label</span><span>B</span></div></div>
Pick justify-content and align-items values and watch three boxes move. It is the quickest way to learn the two axes: justify works along the main axis (the row), align across it. The selects are labelled and update the container's style directly.
var box = document.querySelector('.fx6 .box');
document.querySelectorAll('.fx6 select').forEach(function (s) { s.onchange = function () { box.style[s.dataset.p] = s.value; }; });
07. Vertical Stack with gap
FlexboxSpacing
A column of elements spaced by the container's gap rather than margins on each child, the stack pattern. Spacing lives in one place, the first and last items need no special cases, and a modifier class changes the rhythm for a whole section.
View code
<div class="fx7"><h3>Newsletter</h3><p>One email a month, no tracking pixels.</p><input aria-label="Email" placeholder="you@example.com"><button>Subscribe</button></div>
In a flex row, margin-left: auto on an item absorbs all the free space before it, pushing it and its followers to the end. It is cleaner than wrapping groups in extra divs.
min-width: 0 lets items shrink
Flex items will not shrink below their content's minimum width by default, so a long input or word can overflow the row. min-width: 0 on the flexible item fixes it.
flex: 1 versus flex: 1 1 0
flex: 1 starts each item from its content size, so long content gets a wider column. flex: 1 1 0 starts every item from zero and shares the space equally.
gap for spacing
Use gap on the container instead of margins on items. Spacing stays in one place, works when items wrap and needs no first or last child exceptions.
Frequently asked questions
Flexbox or grid?
Flexbox for one direction of content-sized items, grid for two-dimensional layouts with defined tracks.
Why do my flex items overflow?
Usually the default min-width: auto; set min-width: 0 on the item that should shrink.
Does order affect accessibility?
Yes. The order property changes only the visual order, so keyboard focus can jump around; reorder the HTML instead when you can.