CSS Flexbox Guide: flex-wrap, justify-content, flex-basis

The default. All children sit next to each other on one line, along the main axis, from left to right.

The column layout stacks children under each other. The axes swap: the main axis now runs top to bottom, so justify-content works vertically and align-items horizontally.

display: flex makes a block-level container: it starts on a new line and takes the full available width. display: inline-flex makes an inline-level container: it sits inside a line of text and is only as wide as its content. The children are laid out the same way in both.

Sets the direction of the main axis. There are four values: row (default), row-reverse, column and column-reverse. The reverse values flip the visual order only; the HTML order stays the same.

justify-content distributes the items along the main axis, horizontally in a row. The default packs them at the start. The values you’ll use:

• flex-start / start: packed at the start (default behavior)
• flex-end / end: packed at the end
• center: packed in the middle

The space-* values share the free space between the items:

• space-between: first item at the start, last at the end, equal space between the rest. The classic “logo left, menu right” layout.
• space-around: equal space around each item, so the edges get half as much as the gaps between items.
• space-evenly: exactly the same space between the items and at both edges.

justify-content only has a visible effect when there’s free space left. If the items already fill the row, there’s nothing to distribute.

align-items aligns the items along the cross axis, vertically in a row. The default, stretch, makes every item as tall as the container (or as wide, in a column). The other values:

• center: centered on the cross axis. With justify-content: center, this is the easiest way to center a div.
• flex-start / start: aligned to the top
• flex-end / end: aligned to the bottom
• baseline: aligned so the first lines of text sit on the same baseline, handy for items with different font sizes

By default, flex items all stay on one line and shrink to fit, even if that squeezes them or makes them overflow. flex-wrap lets them move onto new lines instead, which is what makes flexbox layouts responsive.

• nowrap: everything on one line (default)
• wrap: items that don’t fit move to a new line below
• wrap-reverse: same, but new lines go above

Items only wrap when they can’t shrink any further, so give them a minimum size: a flex-basis, a width or a min-width. flex-flow is a shorthand for flex-direction and flex-wrap together.

When items wrap onto several lines, align-content distributes those lines along the cross axis, the same way justify-content distributes items along the main axis. It does nothing on a single line, and it needs extra space in the container (for example a set height) to have a visible effect. The default behaves like stretch, and the other values are the same as for justify-content: flex-start, flex-end, center and the space-* values.

With space-between, space-around and space-evenly, the free space goes between the lines instead of the items.

gap sets the space between flex items, without adding space at the outer edges. Before it existed, people used margins on the items and then removed the margin from the first or last one. gap takes one value for both directions, or two: row-gap then column-gap. It works in every current browser.

flex-grow decides how the free space in the container is shared. It takes any number of 0 or more, and the default is 0: items don’t grow. Give an item flex-grow: 1 and it takes all the leftover space. Give two items 1 and 2, and the second gets twice as much of the free space. That doesn’t make it twice as wide.

flex-shrink is the opposite: it decides how items give up space when there isn’t enough. The default is 1, so every item shrinks. Set it to 0 on things that must keep their size, like icons, avatars or a fixed-width sidebar.

flex-basis is an item’s starting size along the main axis, before flex-grow and flex-shrink are applied. The default, auto, uses the item’s width (or height in a column), or its content size if none is set.

flex-basis vs width: in a row, flex-basis wins over width, and it follows the main axis, so it becomes the height in a column. min-width and max-width still apply on top.

flex sets flex-grow, flex-shrink and flex-basis in one go, and it’s the recommended way to write them. The values you’ll see most:

• flex: 1 = 1 1 0%: grow and shrink equally, ignoring content size. Use it for equal columns.
• flex: auto = 1 1 auto: grow and shrink, starting from the content size.
• flex: none = 0 0 auto: fixed at its content or width.
• flex: 0 1 auto: the default.

align-self overrides the container’s align-items for a single item. It takes the same values: stretch, center, flex-start, flex-end and baseline.

order changes where an item appears without touching the HTML. It takes any whole number, including negatives. The default is 0, and lower numbers come first.

Use it with care: it only changes the visual order. Screen readers and keyboard Tab navigation still follow the HTML, so don’t use order for content whose order matters.

An auto margin on a flex item takes up all the free space on that side. It’s the simplest way to push one item, like a “Sign up” button, to the far end of a navigation bar.

flex: 1 on every child gives equal columns that always fill the row, whatever their content. If you need exact widths with gaps instead, see CSS calc().

Cards with a minimum width that grow to fill the row and wrap when there’s no more room. This is the card grid in the demo above.

Keep the footer at the bottom of the screen on short pages: make the page a column at least as tall as the viewport, and let the main content grow.