26/11/22, 12:03 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
HOME /
GUIDES /
A Complete Guide to Flexbox
Chris Coyier on
Apr 8, 2013 (Updated on Oct 11, 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)
Part 11: More sources (#aa-more-sources)
(#aa-get-the-poster) Get the poster!
Reference this guide a lot? Here’s a high-res image you can print!
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 1/10
26/11/22, 12:03 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
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
(#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
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 2/10
26/11/22, 12:03 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
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.
CSS
.container {
flex-direction: row | row-reverse | column | col
}
row (default): left to right in ltr; right to
left in rtl
row-reverse: right to left in ltr; left to This defines the ability for a flex item to grow
right in rtl if necessary. It accepts a unitless value that
column: same as row but top to bottom serves as a proportion. It dictates what
column-reverse: same as row-reverse amount of the available space inside the flex
but bottom to top container the item should take up.
If all items have flex-grow set to 1, the
remaining space in the container will be
(#aa-flex-wrap) flex-wrap 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
Negative numbers are invalid.
line. You can change that and allow the items
to wrap as needed with this property.
CSS
.container {
(#aa-flex-shrink) flex-shrink
flex-wrap: nowrap | wrap | wrap-reverse;
} This defines the ability for a flex item to
shrink if necessary.
nowrap (default): all flex items will be on
one line
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 3/10
26/11/22, 12:03 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
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
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%;.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 4/10
26/11/22, 12:03 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
.item {
CSS
This defines the alignment along the main flex: none | [ <'flex-grow'> <'flex-shrink'>? |
}
axis. It helps distribute extra free space
leftover when either all the flex items on a line
are inflexible, or are flexible but have reached It is recommended that you use this
their maximum size. It also exerts some shorthand property rather than set the
control over the alignment of items when they individual properties. The shorthand sets the
overflow the line. other values intelligently.
CSS
.container {
justify-content: flex-start | flex-end | center
} (#aa-align-self) 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 one
left: items are packed toward left edge of specified by align-items) to be overridden
the container, unless that doesn’t make for individual flex items.
sense with the flex-direction, then it
behaves like start. Please see the align-items explanation to
right: items are packed toward right edge understand the available values.
of the container, unless that doesn’t make
sense with the flex-direction, then it
CSS
.item {
behaves like end. align-self: auto | flex-start | flex-end | cente
}
center: items are centered along the line
space-between: items are evenly
Note that float, clear and vertical-align
distributed in the line; first item is on the
have no effect on a flex item.
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.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 5/10
26/11/22, 12:03 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
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
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 | c
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 6/10
26/11/22, 12:03 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
}
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 (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
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 7/10
26/11/22, 12:03 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
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-line
Hey!
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 |
}
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
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 8/10
26/11/22, 12:03 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
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
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;
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 9/10
26/11/22, 12:03 A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
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
(#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
(#aa-more-sources) More sources
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 10/10
