CSS Flexbox: Interactive Guide

Setting display: flex on a container turns its direct children into flex items laid out along a main axis, horizontal by default. Everything flexbox does is described in terms of that main axis and the cross axis running perpendicular to it; the five properties below all just position items along one or the other.

flex-direction is what decides which axis is which: in row the main axis runs left to right and the cross axis runs top to bottom; switch to column and that flips, the main axis becomes vertical. Every other property below keeps the same meaning either way, since they're defined relative to the main/cross axes, not literally to "horizontal" and "vertical."

These five properties (plus display: flex itself) all live on the container, not the items, and correspond directly to the dropdowns in the demo above:

Try switching flex-direction to column in the demo, then changing align-items: instead of moving boxes up and down, it now moves them left and right, because the cross axis rotated along with the main axis.

The container properties in Section 3 apply to every item at once. A handful of properties go the other way: set on an individual item, they override how that one item behaves within the container's layout. order is the one driving the drag-and-drop demo above.

.box-3 {
    order: -1; /* visually first, regardless of where it sits in the HTML */
}

Every flex item has a default order of 0. Items are laid out by sorting on order first, and falling back to source (HTML) order for any items that tie, which is why two untouched boxes (both still at the default 0) stay in their original relative order even after a third box elsewhere gets pulled to the front with a negative value. Critically, order changes only the visual position; it doesn't move anything in the DOM, doesn't change tab order for keyboard navigation, and doesn't change how a screen reader announces the content, which makes it purely a visual layout tool and a poor substitute for actually reordering meaningful content in the markup.

Often written together as the flex shorthand, these three control how an item's size responds to the container having extra or insufficient space. flex-basis is the item's starting size before any growing/shrinking happens; flex-grow is a ratio describing how much of any leftover space the item should claim relative to its siblings; flex-shrink is the same idea in reverse, how much of a size deficit the item should absorb when there isn't enough room for every item at its basis size. flex: 1, by far the most common use, is shorthand for flex: 1 1 0%: ignore each item's natural content size and divide the container's space evenly between them.

align-self overrides the container's align-items for one specific item on the cross axis only, useful for pulling a single item to the opposite end of the cross axis from all its siblings without having to restructure the container.

The demo doesn't use the HTML5 native drag-and-drop API (draggable="true", dragstart/drop), which has no built-in touch support. It's built on the Pointer Events API instead (pointerdown/pointermove/pointerup), the same approach used in this site's Pong guide, so dragging works identically with a mouse, a finger, or a pen.

// On press, lift the box visually and remember where the pointer
// grabbed it relative to the box's own top-left corner.
box.addEventListener("pointerdown", function (e) {
    dragging = box;
    box.setPointerCapture(e.pointerId);
    var rect = box.getBoundingClientRect();
    grabOffsetX = e.clientX - rect.left;
    grabOffsetY = e.clientY - rect.top;
    box.classList.add("is-dragging");
});

While the pointer moves, the dragged box follows it with a CSS transform: translate(...), computed from the pointer's current position minus that initial grab offset, so the box doesn't visually "jump" to re-center on the cursor the instant the drag starts.

Finding what's underneath the dragged box is the part that needs a small trick: the box being dragged is itself the topmost element at the pointer's position, so a naive hit test would just find itself. Temporarily setting pointer-events: none on the dragged box makes the browser see straight through it to whatever box is actually underneath:

box.style.pointerEvents = "none";
var under = document.elementFromPoint(e.clientX, e.clientY);
box.style.pointerEvents = "";

var target = under ? under.closest(".flex-box") : null;

On release, if the pointer is over a different box, the two boxes' order values are swapped and the dragged box's transform is reset to none; flexbox itself handles animating both boxes into their new slots, since order is included in the box's transition-eligible layout. Drop it back where it started, or off the container entirely, and nothing changes; only a drop onto another valid box commits a swap.

More Guides