3/12/24, 10:14 PM A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

HOME / GUIDES /

A Complete Guide to Flexbox

Chris Coyier on Apr 8, 2013 (Updated on Dec 9, 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/9
3/12/24, 10:14 PM 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-
parentflex-container) Properties
for the Parent
(flex container)

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

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 2/9
3/12/24, 10:14 PM A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

This establishes the main-axis, thus 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 primarily laying out either
in horizontal rows or vertical columns.

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

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

rtl

row-reverse: right to left in ltr; left to right in

rtl

column: same as row but top to bottom

column-reverse: same as row-reverse but

bottom to top

(#aa-flex-wrap) flex-wrap

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.

CSS
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap (default): all flex items will be on one

line
wrap: flex items will wrap onto multiple lines,
from top to bottom.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 3/9
3/12/24, 10:14 PM A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

wrap-reverse: flex items will wrap onto

multiple lines from bottom to top.

There are some visual demos of flex-wrap here

(https://css-
tricks.com/almanac/properties/f/flex-wrap/) .

(#aa-flex-flow) flex-flow
This is a shorthand for the flex-direction and
flex-wrap properties, which together define the
flex container’s main and cross axes. The default
value is row nowrap.

CSS
.container {
flex-flow: column wrap;
}

(#aa-justify-content) justify-content
(#aa-properties-for-the-
childrenflex-items) Properties for
the Children
(flex items)

(#aa-order) order

By default, flex items are laid out in the source

order. However, the order property controls the
order in which they appear in the flex container.
This defines the alignment along the main axis. It
helps distribute extra free space leftover when CSS
.item {
either all the flex items on a line are inflexible, or order: 5; /* default is 0 */

are flexible but have reached their maximum size. }

It also exerts some control over the alignment of

items when they overflow the line.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 4/9
3/12/24, 10:14 PM A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

.container {
CSS
Items with the same order revert to source order.
justify-content: flex-start | flex-end | center | space-betw
}

(#aa-flex-grow) flex-grow
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 defines the ability for a flex item to grow if
left: items are packed toward left edge of the necessary. It accepts a unitless value that serves
container, unless that doesn’t make sense with as a proportion. It dictates what amount of the
the flex-direction, then it behaves like available space inside the flex container the item
start. should take up.
right: items are packed toward right edge of
the container, unless that doesn’t make sense If all items have flex-grow set to 1, the remaining
with the flex-direction, then it behaves like space in the container will be distributed equally
end. to all children. If one of the children has a value of
center: items are centered along the line 2, that child would take up twice as much of the

space-between: items are evenly distributed in space either one of the others (or it will try, at
the line; first item is on the start line, last item least).
on the end line
CSS

space-around: items are evenly distributed in .item {

flex-grow: 4; /* default 0 */
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 Negative numbers are invalid.

the container edge, but two units of space

between the next item because that next item
has its own spacing that applies.
(#aa-flex-shrink) flex-shrink
space-evenly: items are distributed so that the
spacing between any two items (and the space This defines the ability for a flex item to shrink if

to the edges) is equal. necessary.

CSS
Note that that browser support for these values is .item {
flex-shrink: 3; /* default 1 */
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 Negative numbers are invalid.

(https://developer.mozilla.org/en-
US/docs/Web/CSS/justify-content) . The safest
values are flex-start, flex-end, and center.
(#aa-flex-basis) flex-basis
There are also two additional keywords you can This defines the default size of an element before
pair with these values: safe and unsafe. Using the remaining space is distributed. It can be a
safe ensures that however you do this type of length (e.g. 20%, 5rem, etc.) or a keyword. The

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 5/9
3/12/24, 10:14 PM A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

positioning, you can’t push an element such that auto keyword means “look at my width or height
it renders off-screen (e.g. off the top) in such a property” (which was temporarily done by the
way the content can’t be scrolled too (called “data main-size keyword until deprecated). The
loss”). content keyword means “size it based on the
item’s content” – this keyword isn’t well
supported yet, so it’s hard to test and harder to
(#aa-align-items) align-items know what its brethren max-content, min-
content, and fit-content do.

CSS

.item {
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. (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-
This defines the default behavior for how flex basis) are optional. The default is 0 1 auto, but
items are laid out along the cross axis on the if you set it with a single number value, like flex:
current line. Think of it as the justify-content 5;, that changes the flex-basis to 0%, so it’s like
version for the cross-axis (perpendicular to the setting flex-grow: 5; flex-shrink: 1; flex-
main-axis). basis: 0%;.

CSS
CSS
.container { .item {
align-items: stretch | flex-start | flex-end | center | base flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basi
} }

stretch (default): stretch to fill the container It is recommended that you use this
(still respect min-width/max-width) shorthand property rather than set the
flex-start / start / self-start: items are individual properties. The shorthand sets the
placed at the start of the cross axis. The other values intelligently.
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 (#aa-align-self) align-self
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

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 6/9
3/12/24, 10:14 PM A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

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.

This allows the default alignment (or the one

(#aa-align-content) align-content specified by align-items) to be overridden for
individual flex items.

Please see the align-items explanation to

understand the available values.

CSS
.item {
align-self: auto | flex-start | flex-end | center | baseline
}

Note that float, clear and vertical-align have

no effect on a flex item.

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
Hey! 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 | space-betwee
}

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.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 7/9
3/12/24, 10:14 PM A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

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

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.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 8/9
3/12/24, 10:14 PM A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
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

(#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/ 9/9