Flexbox
Definition
Flexbox is one-dimensional. A flex container lays its children out in one direction, set by flex-direction as row or column, and every property is about that line: justify-content spaces items along it, align-items positions them across it, and gap puts a fixed distance between them. Items can grow or shrink to fit, controlled by flex-grow, flex-shrink and flex-basis, usually written together as the flex shorthand — flex: 1 makes an item take an equal share of the free space. By default items do not wrap; adding flex-wrap: wrap lets them fall onto a new line when they run out of room. Sizes are driven by the content: flexbox asks the items how big they want to be and then divides what remains.
Why It Matters
Most of the small alignment jobs on a page are flexbox jobs, and doing them another way is where the old hacks came from. A navigation bar with a logo pinned left and links pinned right is display: flex plus justify-content: space-between — two lines instead of floats and clearfix. Centring something both ways is three. The failure mode is choosing the wrong tool: laying out a whole page grid as nested flex containers works, but the columns in different rows never line up, because each container only knows about its own line. If you find yourself setting percentage widths on flex items to make rows agree with each other, that is the signal to use CSS Grid instead.
How It Works
Setting display: flex on an element makes it a flex container and its direct children flex items — grandchildren are unaffected, which is the first thing to check when a nested element ignores the alignment. The browser then measures each item's natural size along the main axis, adds them up, and shares the difference according to each item's flex-grow or flex-shrink value. Because shrinking is on by default, a long word or a wide image can squash its neighbours; min-width: 0 on the item is the usual fix for text that refuses to wrap inside a flex row. The cross-axis properties stretch items to equal height unless align-items says otherwise, which is where equal-height cards come from at no cost. Switching flex-direction to column swaps which axis justify-content and align-items refer to — the properties do not change name, the axis does.
Real-World Example
A consultant publishes a one-page profile at maya-reid.99helpers.site with a header that collapses awkwardly on a phone: the name and the contact links pile up at the left. The header is display: flex with justify-content: space-between and no wrapping, so at 380px the two blocks are simply squeezed. Adding flex-wrap: wrap and gap: 12px lets the contact links drop to a second line with proper spacing, and the desktop layout is untouched.
Common Mistakes
- ✕Putting display: flex on the wrong element — it affects direct children only, so styling a wrapper does nothing for the items two levels down
- ✕Trying to align rows across separate flex containers — each container knows only its own line, and columns that must line up across rows need CSS Grid
- ✕Forgetting that flex items shrink by default — a wide image or an unbreakable string will compress everything beside it until min-width: 0 or flex-shrink: 0 says otherwise
Related Terms
CSS Grid
CSS Grid is the layout mode for arranging items in two dimensions at once — rows and columns together. You turn it on with display: grid on the parent and define the tracks with grid-template-columns and grid-template-rows.
CSS Selector
A CSS selector is the part of a rule before the braces that says which elements the rule applies to. It can match by tag name, class, id, attribute, position in the document or state, and selectors can be combined to be as narrow as you need.
Media Query
A media query is a block of CSS that only applies when a condition about the device is true — most often a minimum or maximum viewport width. It is the mechanism behind responsive design, written as @media followed by the condition and a set of rules in braces.
Stylesheet
A stylesheet is the set of CSS rules that tells the browser how a page should look. It is usually a separate .css file linked from the head, though it can also sit in a style element inside the HTML itself.
Responsive Design
Responsive design is building one page that adapts to whatever screen opens it, using flexible layout and CSS media queries, instead of maintaining separate mobile and desktop versions.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →