ARTICLES NOTES LINKS GUIDES ALMANAC SHUFFLE

HOME / GUIDES /

CSS Flexbox Layout Guide

Chris Coyier on Aug 12, 2024

Our comprehensive guide to CSS flexbox layout. This complete guide

explains everything about flexbox, focusing on all the different possible
properties for the parent element (the flex container) and the child elements
(the flex items). It also includes history, demos, patterns, and a browser
support chart.

Table of contents Get the poster!

Part 1: Background Reference this
Part 2: Basics and terminology guide a lot? Here’s
Part 3: Flexbox properties a high-res image

Part 4: Prefixing Flexbox you can print!

Part 5: Examples
DOWNLOAD FREE
Part 6: Flexbox tricks
Part 7: Browser support
Part 8: Bugs
Part 9: Related properties
Part 10: More information
Part 11: More sources

Background

Basics and terminology

Flexbox properties

Properties for the Parent Properties for the Children

(flex container) (flex items)

display order
This defines a flex container; inline or
block depending on the given value. It
enables a flex context for all its direct
children.

CSS

.container {
display: flex; /* or inline-flex */
}

Note that CSS columns have no effect on a

flex container.

By default, flex items are laid out in the

source order. However, the order property
flex-direction controls the order in which they appear in
the flex container.

CSS

.item {
order: 5; /* default is 0 */
}

Items with the same order revert to

This establishes the main-axis, thus source order.
defining the direction flex items are placed
in the flex container. Flexbox is (aside from
optional wrapping) a single-direction
layout concept. Think of flex items as
flex-grow
primarily laying out either in horizontal
rows or vertical columns.

CSS

.container {
flex-direction: row | row-reverse | column | column-reverse;
}

This defines the ability for a flex item to

row (default): left to right in ltr; right
to left in rtl grow if necessary. It accepts a unitless
value that serves as a proportion. It
row-reverse: right to left in ltr; left to
dictates what amount of the available
right in rtl
space inside the flex container the item
column: same as row but top to bottom
should take up.
column-reverse: same as row-
reverse but bottom to top If all items have flex-grow set to 1, the
remaining space in the container will be
distributed equally to all children. If one of
the children has a value of 2, that child
flex-wrap
would take up twice as much of the space
as either one of the others (or it will try, at
least).

CSS

.item {
flex-grow: 4; /* default 0 */
}

By default, flex items will all try to fit onto

one line. You can change that and allow the Negative numbers are invalid.
items to wrap as needed with this property.

CSS

.container {
flex-wrap: nowrap | wrap | wrap-reverse;
flex-shrink
} This defines the ability for a flex item to
shrink if necessary.
nowrap (default): all flex items will be
CSS

on one line .item {

wrap: flex items will wrap onto multiple flex-shrink: 3; /* default 1 */

lines, from top to bottom. }

wrap-reverse: flex items will wrap

onto multiple lines from bottom to top. Negative numbers are invalid.

There are some visual demos of flex-

wrap here.
flex-basis
This defines the default size of an element
before the remaining space is distributed.
flex-flow
It can be a length (e.g. 20%, 5rem, etc.) or a
This is a shorthand for the flex- keyword. The auto keyword means “look
direction and flex-wrap properties, at my width or height property” (which
which together define the flex container’s was temporarily done by the main-size
main and cross axes. The default value is keyword until deprecated). The content
row nowrap. keyword means “size it based on the item’s

CSS
content” – this keyword isn’t well
.container { supported yet, so it’s hard to test and
flex-flow: column wrap; harder to know what its brethren max-
} content, min-content, and fit-content
do.

CSS

.item {
justify-content flex-basis: | auto; /* default auto */
}

If set to 0, the extra space around content

isn’t factored in. If set to auto, the extra
space is distributed based on its flex-
grow value. See this graphic.

flex
This is the shorthand for flex-grow,
flex-shrink and flex-basis combined.
The second and third parameters (flex-
shrink and flex-basis) are optional.
The default is 0 1 auto, but if you set it
with a single number value, like flex: 5;,
that changes the flex-basis to 0%, so it’s
like setting flex-grow: 5; flex-
shrink: 1; flex-basis: 0%;.

CSS

This defines the alignment along the main .item {

axis. It helps distribute extra free space flex: none | [ <'flex-grow'> <'flex-shrink'>?
leftover when either all the flex items on a }

line are inflexible, or are flexible but have

reached their maximum size. It also exerts It is recommended that you use this
some control over the alignment of items shorthand property rather than set the
when they overflow the line. individual properties. The shorthand sets
the other values intelligently.
CSS

.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
}
align-self
flex-start (default): items are packed
toward the start of the flex-direction.
flex-end: items are packed toward the
end of the flex-direction.
start: items are packed toward the
start of the writing-mode direction.
end: items are packed toward the end of
the writing-mode direction.
This allows the default alignment (or the
left: items are packed toward left edge
of the container, unless that doesn’t one specified by align-items) to be

make sense with the flex-direction, overridden for individual flex items.
then it behaves like start.
Please see the align-items explanation to
right: items are packed toward right
understand the available values.
edge of the container, unless that
doesn’t make sense with the flex- CSS

direction, then it behaves like end. .item {

align-self: auto | flex-start | flex-end | cen
center: items are centered along the
}
line
space-between: items are evenly
Note that float, clear and vertical-
distributed in the line; first item is on
align have no effect on a flex item.
the start line, last item on the end line
space-around: items are evenly
distributed in the line with equal space
around them. Note that visually the
spaces aren’t equal, since all the items
have equal space on both sides. The first
item will have one unit of space against
the container edge, but two units of
space between the next item because
that next item has its own spacing that
applies.
space-evenly: items are distributed so
that the spacing between any two items
(and the space to the edges) is equal.

Note that that browser support for these

values is nuanced. For example, space-
between never got support from some
versions of Edge, and start/end/left/right
aren’t in Chrome yet. MDN has detailed
charts. The safest values are flex-start,
flex-end, and center.

There are also two additional keywords

you can pair with these values: safe and
unsafe. Using safe ensures that however
you do this type of positioning, you can’t
push an element such that it renders off-
screen (e.g. off the top) in such a way the
content can’t be scrolled too (called “data
loss”).

align-items

This defines the default behavior for how

flex items are laid out along the cross axis
on the current line. Think of it as the
justify-content version for the cross-
axis (perpendicular to the main-axis).

CSS

.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last basel
}

stretch (default): stretch to fill the

container (still respect min-width/max-
width)
flex-start / start / self-start:
items are placed at the start of the cross
axis. The difference between these is
subtle, and is about respecting the
flex-direction rules or the writing-
mode rules.

flex-end / end / self-end: items are

placed at the end of the cross axis. The
difference again is subtle and is about
respecting flex-direction rules vs.
writing-mode rules.

center: items are centered in the cross-

axis
baseline: items are aligned such as
their baselines align

The safe and unsafe modifier keywords

can be used in conjunction with all the rest
of these keywords (although note browser
support), and deal with helping you
prevent aligning elements such that the
content becomes inaccessible.

align-content

This aligns a flex container’s lines within

when there is extra space in the cross-axis,
similar to how justify-content aligns
individual items within the main-axis.

Note: This property only takes effect on multi-

line flexible containers, where flex-wrap is
set to either wrap or wrap-reverse). A single-
Hey!
line flexible container (i.e. where flex-wrap is
set to its default value, no-wrap) will not
reflect align-content.

CSS

.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly |
}

normal (default): items are packed in

their default position as if no value was
set.
flex-start / start: items packed to
the start of the container. The (more
supported) flex-start honors the
flex-direction while start honors
the writing-mode direction.
flex-end / end: items packed to the
end of the container. The (more
support) flex-end honors the flex-
direction while end honors the
writing-mode direction.

center: items centered in the container

space-between: items evenly

distributed; the first line is at the start
of the container while the last one is at
the end
space-around: items evenly
distributed with equal space around
each line
space-evenly: items are evenly
distributed with equal space around
them
stretch: lines stretch to take up the
remaining space

The safe and unsafe modifier keywords

can be used in conjunction with all the rest
of these keywords (although note browser
support), and deal with helping you
prevent aligning elements such that the
content becomes inaccessible.

gap, row-gap, column-gap

The gap property explicitly controls the

space between flex items. It applies that
spacing only between items not on the outer
edges.

CSS

.container {
display: flex;
...
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}

The behavior could be thought of as a

minimum gutter, as if the gutter is bigger
somehow (because of something like
justify-content: space-between;)
then the gap will only take effect if that
space would end up smaller.

It is not exclusively for flexbox, gap works

in grid and multi-column layout as well.

Prefixing Flexbox

Examples

Flexbox tricks!

Browser support

Bugs

Related properties

More information

More sources

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and
services.

Comments

Toggle All Comments (there are a lot)

Leave a Reply

Comment (Markdown supported)

New Comment! Use `backticks` for code.

Name

Email

Website

Save my name, email, and website in this browser for the next time I comment.

POST COMMENT

KEEP UP TO DATE ON WEB DEV

with our hand-crafted newsletter

CSS-Tricks is powered by SUBSCRIBE

DigitalOcean.

DIGITALO CE A N CSS -TR I C KS SOC I AL

About DO Write for us! RSS Feeds
Cloudways Advertise with us CodePen
Legal stuff Contact us Mastodon
Get free credit! X