16/09/2022 00:46 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

HOME / GUIDES /

A Complete Guide to Flexbox

Chris Coyier on Apr 8, 2013 (Updated on Aug 30, 2022)

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
Part 1: (#aa-introduction) Background (#aa-background)
Part 2: (#aa-introduction) Basics and terminology (#aa-basics-and-terminology)
Part 3: (#aa-introduction) Flexbox properties (#aa-flexbox-properties)
Part 4: (#aa-introduction) Prefixing Flexbox (#aa-prefixing-flexbox)
Part 5: (#aa-introduction) Examples (#aa-examples)
Part 6: (#aa-introduction) Flexbox tricks (#aa-flexbox-tricks)
Part 7: (#aa-introduction) Browser support (#aa-browser-support)
Part 8: (#aa-introduction) Bugs (#aa-bugs)
Part 9: (#aa-introduction) Related properties (#aa-related-properties)
Part 10: (#aa-introduction) More information (#aa-more-information)

(#aa-get-the-poster) Get the poster!

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 1/11
16/09/2022 00:46 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

Reference this guide a lot? Here’s a high-res image you can print!

DOWNLOAD FREE (HTTPS://CSS-TRICKS.COM/WP-CONTENT/UPLOADS/2022/02/CSS-FLEXBOX-POSTER.PNG)

(#aa-background) Background

(#aa-basics-and-terminology) Basics and terminology

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 2/11
16/09/2022 00:46 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

(#aa-flexbox-properties) Flexbox properties

(#aa-properties-for-the- (#aa-properties-for-the-
parentflex-container) Properties childrenflex-items) Properties for
for the Parent the Children
(flex container) (flex items)

(#aa-display) display (#aa-order) 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.

(#aa-flex-direction) flex- By default, flex items are laid out in the source
direction order. However, the order property 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 source

This establishes the main-axis, thus defining
order.
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 primarily laying out (#aa-flex-grow) flex-grow
either in horizontal rows or vertical columns.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 3/11
16/09/2022 00:46 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

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

row (default): left to right in ltr; right to

left in rtl
row-reverse: right to left in ltr; left to
right in rtl
This defines the ability for a flex item to grow
column: same as row but top to bottom
if necessary. It accepts a unitless value that
column-reverse: same as row-reverse but serves as a proportion. It dictates what
bottom to top amount of the available space inside the flex
container the item should take up.

If all items have flex-grow set to 1, the

(#aa-flex-wrap) flex-wrap
remaining space in the container will be
distributed equally to all children. If one of
the children has a value of 2, that child would
take up twice as much of the space 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 items
to wrap as needed with this property. Negative numbers are invalid.

CSS

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

.item {
lines, from top to bottom. flex-shrink: 3; /* default 1 */
}
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 (https://css-
tricks.com/almanac/properties/f/flex-wrap/) .
(#aa-flex-basis) flex-basis
This defines the default size of an element
before the remaining space is distributed. It
(#aa-flex-flow) flex-flow can be a length (e.g. 20%, 5rem, etc.) or a
This is a shorthand for the flex-direction keyword. The auto keyword means “look at
and flex-wrap properties, which together my width or height property” (which was

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 4/11
16/09/2022 00:46 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

define the flex container’s main and cross temporarily done by the main-size keyword
axes. The default value is row nowrap. until deprecated). The content keyword
means “size it based on the item’s content” –
CSS

.container { this keyword isn’t well supported yet, so it’s

flex-flow: column wrap;
hard to test and harder to know what its
}
brethren max-content, min-content, and fit-
content do.

CSS

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

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. (http://www.w3.org/TR/css3-
flexbox/images/rel-vs-abs-flex.svg)

(#aa-flex) 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

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'f
}
This defines the alignment along the main
axis. It helps distribute extra free space
It is recommended that you use this
leftover when either all the flex items on a line
shorthand property rather than set the
are inflexible, or are flexible but have reached
individual properties. The shorthand sets the
their maximum size. It also exerts some
other values intelligently.
control over the alignment of items when they
overflow the line.

CSS

.container { (#aa-align-self) align-self

justify-content: flex-start | flex-end | center | sp
}

flex-start (default): items are packed

toward the start of the flex-direction.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 5/11
16/09/2022 00:46 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

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.

left: items are packed toward left edge of

the container, unless that doesn’t make
sense with the flex-direction, then it This allows the default alignment (or the one
behaves like start.
specified by align-items) to be overridden
right: items are packed toward right edge for individual flex items.
of the container, unless that doesn’t make
sense with the flex-direction, then it Please see the align-items explanation to
behaves like start. understand the available values.
center: items are centered along the line
CSS

space-between: items are evenly .item {

align-self: auto | flex-start | flex-end | center |
distributed in the line; first item is on the }
start line, last item on the end line
space-around: items are evenly distributed
Note that float, clear and vertical-align
in the line with equal space around them.
have no effect on a flex item.
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 (https://developer.mozilla.org/en-
US/docs/Web/CSS/justify-content) . 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
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 6/11
16/09/2022 00:46 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

top) in such a way the content can’t be

scrolled too (called “data loss”).

(#aa-align-items) 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 | cente
}

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.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 7/11
16/09/2022 00:46 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

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 (https://developer.mozilla.org/en-
US/docs/Web/CSS/align-items) ), and deal
with helping you prevent aligning elements
such that the content becomes inaccessible.

(#aa-align-content) 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
Hey! wrap or wrap-reverse). A single-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 | spac
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 8/11
16/09/2022 00:46 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

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 (https://developer.mozilla.org/en-
US/docs/Web/CSS/align-items) ), and deal
with helping you prevent aligning elements
such that the content becomes inaccessible.

(#aa-gap-row-gap-column-gap)
gap, row-gap, column-gap

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 9/11
16/09/2022 00:46 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

The gap property (https://css-

tricks.com/almanac/properties/g/gap/)
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.

(#aa-prefixing-flexbox) Prefixing Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 10/11
16/09/2022 00:46 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

(#aa-examples) Examples

(#aa-flexbox-tricks) Flexbox Tricks

(#aa-browser-support) Browser support

(#aa-bugs) Bugs

(#aa-related-properties) Related properties

(#aa-more-information) More information

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 11/11