CSS Flexbox cheat sheet showing flexible items, alignment, wrapping, gaps, and layout directions
by

CSS Layout Reference

CSS Flexbox Cheat Sheet: Properties & Examples

Quickly find Flexbox container and item properties, understand the main and cross axes, compare alignment values, and copy practical CSS for responsive one-dimensional layouts.

Search the cheat sheet Browse all sections
  • 18 focused sections
  • Copyable CSS examples
  • Interactive Flexbox playground

Essential syntax at a glance

Flexbox Quick Reference

Apply Flexbox to a parent element, then use container properties to control the layout and item properties to control individual children.

Quick reference for common CSS Flexbox properties
Property Applied to Purpose Copy
display Container display: flex; creates a block-level flex container.
flex-direction Container flex-direction: row; sets the main-axis direction.
flex-wrap Container flex-wrap: wrap; allows items to form additional flex lines.
justify-content Container justify-content: space-between; distributes free space on the main axis.
align-items Container align-items: center; aligns items on the cross axis.
align-content Multiline container align-content: space-around; distributes flex lines on the cross axis.
gap Container gap: 1rem; inserts consistent spacing between flex items.
flex Item flex: 1 1 16rem; sets grow, shrink, and basis together.
align-self Item align-self: flex-end; overrides cross-axis alignment for one item.
order Item order: 2; changes an item’s visual position without changing the source.

Create the formatting context

Flex Container Basics

An element becomes a flex container when its computed display value is flex or inline-flex. Its in-flow children then participate as flex items.

Block-level flex container

display: flex makes the container behave like a block in its surrounding layout while arranging its children with Flexbox.

.container { display: flex; gap: 1rem; }

Inline-level flex container

display: inline-flex creates the same internal Flexbox layout while allowing the container itself to flow inline.

.tag-list { display: inline-flex; gap: 0.5rem; }

Basic Flexbox structure

Only the direct children of the container become flex items. Content nested inside those children keeps its normal layout unless another flex or grid context is created. 

<div class="card-row">
  <article class="card">First card</article>
  <article class="card">Second card</article>
  <article class="card">Third card</article>
</div>

<style>
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 14rem;
}
</style>

Understand Flexbox direction

Main Axis and Cross Axis

Every flex container has a main axis and a perpendicular cross axis. The value of flex-direction determines the main axis, so Flexbox alignment is not always simply horizontal or vertical.

Row direction

With flex-direction: row, the main axis follows the inline direction. In left-to-right English text, it usually runs from left to right.

flex-direction: row;

Column direction

With flex-direction: column, the main axis follows the block direction. In typical horizontal writing, it runs from top to bottom.

flex-direction: column;
Relationship between Flexbox axes and alignment properties
Concept What it controls Common properties
Main axis The primary direction in which flex items are placed. justify-content, flex-grow, flex-shrink, flex-basis
Cross axis The axis perpendicular to the main axis. align-items, align-self, align-content
Main start and end The logical beginning and end of the main axis. flex-start, flex-end, start, end
Cross start and end The logical beginning and end of the cross axis. align-items: flex-start, align-items: flex-end

Choose the main axis

flex-direction

The flex-direction property defines the direction of the main axis and the order in which flex items are visually placed along it.

Values for the CSS flex-direction property
Value Behavior Example Copy
row Places items along the container’s inline direction. This is the initial value. flex-direction: row;
row-reverse Uses the row axis but swaps its main-start and main-end directions. flex-direction: row-reverse;
column Places items along the container’s block direction. flex-direction: column;
column-reverse Uses the column axis but swaps its main-start and main-end directions. flex-direction: column-reverse;

Switch between horizontal and vertical layouts

A component can use a column layout on narrow screens and switch to a row layout when more horizontal space becomes available. 

.feature {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .feature {
    flex-direction: row;
    align-items: center;
  }
}

Control multiple flex lines

flex-wrap and flex-flow

Flex items remain on one line by default. Use flex-wrap when items should move onto additional lines, or use flex-flow to combine direction and wrapping.

Values for the CSS flex-wrap property
Value Behavior Example Copy
nowrap Keeps all items on a single flex line. Items may shrink or overflow when space is limited. flex-wrap: nowrap;
wrap Creates additional flex lines in the normal cross-axis direction. flex-wrap: wrap;
wrap-reverse Creates additional lines while swapping the cross-start and cross-end directions. flex-wrap: wrap-reverse;
flex-flow Combines flex-direction and flex-wrap in one declaration. flex-flow: row wrap;

Responsive card row

Give each item a preferred starting size and allow the container to wrap when there is not enough room.

.card-row { display: flex; flex-wrap: wrap; gap: 1rem; } .card { flex: 1 1 16rem; }

Column with wrapped items

In a column layout, wrapping creates additional columns when the container has a constrained height.

.vertical-list { display: flex; flex-flow: column wrap; height: 20rem; gap: 1rem; }

Align items on the main axis

justify-content

The justify-content property distributes available space between and around flex items along the container’s main axis.

Common values for the CSS justify-content property
Value Main-axis behavior Example Copy
flex-start Packs items toward the main-start edge. justify-content: flex-start;
flex-end Packs items toward the main-end edge. justify-content: flex-end;
center Centers the items as a group on the main axis. justify-content: center;
space-between Places equal space between adjacent items, with no added space at the outer edges. justify-content: space-between;
space-around Gives every item equal surrounding space, making the outer gaps half the size of the gaps between items. justify-content: space-around;
space-evenly Creates equal spacing between items and at both outer edges. justify-content: space-evenly;

Center content on the main axis

In a row container this normally centers items horizontally. In a column container it normally centers them vertically.

.container { display: flex; justify-content: center; }

Separate navigation groups

Use space-between when the first and last groups should sit against opposite ends of the available main axis.

.navigation { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

Align items on the cross axis

align-items

The align-items property sets the default cross-axis alignment for every flex item on a flex line. Individual items can override it with align-self.

Common values for the CSS align-items property
Value Cross-axis behavior Example Copy
stretch Stretches auto-sized items across the cross axis. This is the initial behavior. align-items: stretch;
flex-start Places items against the cross-start edge of the flex line. align-items: flex-start;
flex-end Places items against the cross-end edge of the flex line. align-items: flex-end;
center Centers items within the flex line on the cross axis. align-items: center;
baseline Aligns compatible items so their text baselines line up. align-items: baseline;

Center an interface row

Cross-axis centering keeps icons, labels, and buttons aligned when their heights differ.

.toolbar { display: flex; align-items: center; gap: 0.75rem; }

Align text by baseline

Baseline alignment is useful when adjacent text elements use different font sizes but should share a visual text line.

.price-row { display: flex; align-items: baseline; gap: 0.5rem; }

Distribute multiple flex lines

align-content

The align-content property distributes flex lines along the cross axis when wrapping has created multiple lines and the container has unused cross-axis space.

Common values for the CSS align-content property
Value Multiline behavior Example Copy
stretch Stretches auto-sized flex lines to fill the available cross-axis space. align-content: stretch;
flex-start Packs flex lines toward the cross-start edge. align-content: flex-start;
flex-end Packs flex lines toward the cross-end edge. align-content: flex-end;
center Centers all flex lines as a group on the cross axis. align-content: center;
space-between Places equal space between lines, with no added space at the outer edges. align-content: space-between;
space-around Adds equal surrounding space to every line, producing smaller outer gaps. align-content: space-around;
space-evenly Creates equal spacing between lines and at both cross-axis edges. align-content: space-evenly;

Center several wrapped lines

The container needs wrapping, multiple lines, and a defined or constrained cross size before the extra space becomes visible. 

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.75rem;
  min-height: 18rem;
}

Add consistent spacing

gap, row-gap, and column-gap

Gap properties add spacing between flex items and flex lines without adding space around the container’s outer edges.

CSS gap properties used with Flexbox
Property Purpose Example Copy
gap Sets the same spacing between rows and columns. gap: 1rem;
gap Accepts separate row and column gap values. gap: 1rem 2rem;
row-gap Sets the spacing associated with rows or wrapped flex lines. row-gap: 1.5rem;
column-gap Sets the spacing associated with columns or items across a row. column-gap: 2rem;
clamp() Creates fluid spacing with minimum and maximum limits. gap: clamp(0.75rem, 2vw, 2rem);

Navigation spacing

Gap keeps the spacing between navigation items consistent without requiring margins on individual links.

.navigation { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

Responsive card spacing

A fluid gap can grow with the viewport while remaining within controlled limits.

.card-list { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.5rem); }

Understand flexible dimensions

Flex Item Sizing

Flex item size is determined by the item’s flex basis, available space, growth and shrink factors, intrinsic content, and minimum or maximum size constraints.

Important concepts that affect Flexbox item sizing
Concept Effect Common CSS Copy
Initial flex values Items do not grow, may shrink, and use an automatic basis. flex: 0 1 auto;
Preferred starting size A definite basis gives the sizing algorithm a starting main size. flex-basis: 16rem;
Flexible growth Positive free space can be distributed among items with a growth factor. flex-grow: 1;
Flexible shrinking Items can become smaller when their combined base sizes exceed the container. flex-shrink: 1;
Minimum content constraint Long content can prevent a flex item from becoming narrower than expected. min-width: 0;
Maximum size A maximum constraint limits growth even when free space remains. max-width: 24rem;

Flexible cards with a preferred width

Each card starts near 16rem, grows to share extra room, shrinks when necessary, and wraps when the line cannot accommodate another card.

.card-list { display: flex; flex-wrap: wrap; gap: 1rem; } .card { flex: 1 1 16rem; }

Prevent long content from overflowing

Flex items have an automatic minimum size. Resetting min-width allows a row item to shrink below its content-based minimum.

.content { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

Distribute positive free space

flex-grow

The flex-grow property controls how flex items share positive free space after their base sizes and container constraints have been considered.

Common flex-grow values and behaviors
Value Behavior Example Copy
0 The item does not claim positive free space. This is the initial value. flex-grow: 0;
1 The item participates in growth with a factor of one. flex-grow: 1;
2 The item receives twice the growth share of an otherwise comparable item with factor one. flex-grow: 2;
1 on all items Every item receives an equal share of positive free space, subject to its base size and constraints. flex: 1 1 0;

Fill the remaining toolbar space

Let the search field expand while surrounding controls keep their content-based widths.

.toolbar { display: flex; gap: 0.75rem; } .toolbar__search { flex-grow: 1; min-width: 0; }

Create proportional growth

These factors divide free space in a 1-to-2 ratio; they do not directly set the final items to one-third and two-thirds widths.

.primary { flex-grow: 2; } .secondary { flex-grow: 1; }

Resolve insufficient space

flex-shrink

The flex-shrink property controls how flex items reduce their main sizes when their combined flex base sizes exceed the available space.

Common flex-shrink values and behaviors
Value Behavior Example Copy
1 Allows the item to shrink when necessary. This is the initial value. flex-shrink: 1;
0 Prevents the item from shrinking below its flex base size. flex-shrink: 0;
2 Gives the item a larger weighted shrink factor than a comparable item with factor one. flex-shrink: 2;
min-width: 0 Allows a row item to shrink below its automatic content-based minimum size. min-width: 0;

Keep an icon or button stable

Prevent a fixed-size control from becoming compressed while a neighboring text area absorbs the available shrinkage.

.toolbar__button { flex: 0 0 auto; } .toolbar__text { flex: 1 1 auto; min-width: 0; }

Fixed sidebar with flexible content

The sidebar keeps its basis while the main content can grow and shrink within the remaining row space.

.sidebar { flex: 0 0 16rem; } .main-content { flex: 1 1 auto; min-width: 0; }

Set the initial main size

flex-basis

The flex-basis property defines an item’s initial main size before Flexbox distributes positive or negative free space.

Common flex-basis values and their effects
Value Starting-size behavior Example Copy
auto Uses the relevant width or height when definite; otherwise it considers the item’s content. flex-basis: auto;
0 Starts the flexible calculation from zero, making growth factors more dominant. flex-basis: 0;
Length Uses a definite initial main size such as pixels or rem units. flex-basis: 18rem;
Percentage Calculates the basis against the flex container’s definite inner main size. flex-basis: 40%;
content Uses the flex item’s content to determine its starting main size. flex-basis: content;

Responsive card basis

Cards begin at a practical reading width, grow to fill each line, and wrap when another card no longer fits.

.card { flex-grow: 1; flex-shrink: 1; flex-basis: 18rem; }

Equal flexible columns

A zero basis removes content-based starting-size differences before the available space is distributed.

.column { flex: 1 1 0; min-width: 0; }

Combine item sizing controls

The flex Shorthand

The flex shorthand sets flex-grow, flex-shrink, and flex-basis together. Using the shorthand makes the intended sizing behavior easier to see.

Common CSS flex shorthand values and expansions
Shorthand Equivalent values Typical use Copy
flex: initial; 0 1 auto Uses the initial behavior: do not grow, allow shrinking, and use an automatic basis.
flex: auto; 1 1 auto Allows growth and shrinking from an automatic, content-aware starting size.
flex: none; 0 0 auto Creates an inflexible item based on its automatic main size.
flex: 1; Commonly behaves as 1 1 0% Makes sibling items share available space from a zero-percentage basis.
flex: 1 1 16rem; Grow: 1, shrink: 1, basis: 16rem Creates flexible, wrapping items with a practical preferred size.
flex: 0 0 16rem; Grow: 0, shrink: 0, basis: 16rem Keeps an item at a fixed main size unless another rule overrides it.

Equal flexible columns

Apply the same shorthand to each sibling when they should begin from the same flexible basis and share available space.

.column { flex: 1; min-width: 0; }

Fixed sidebar and flexible main area

Keep the sidebar stable while allowing the main content to use the remaining width.

.sidebar { flex: 0 0 16rem; } .main { flex: 1 1 0; min-width: 0; }

Control individual flex items

align-self and order

Use align-self to override cross-axis alignment for one flex item. Use order to change visual placement while keeping the underlying HTML source order unchanged.

Common align-self and order values for Flexbox items
Property and value Behavior Example Copy
align-self: auto Uses the parent container’s align-items value. This is the initial behavior. align-self: auto;
align-self: flex-start Places one item against the cross-start edge. align-self: flex-start;
align-self: center Centers one item on the cross axis. align-self: center;
align-self: flex-end Places one item against the cross-end edge. align-self: flex-end;
order: 0 Keeps the item in the default order group. All flex items begin with this value. order: 0;
order: -1 Places the item before items in the default zero group, subject to direction. order: -1;
order: 1 Places the item after items in the default zero group, subject to direction. order: 1;

Align one button differently

Override the container’s default alignment without changing the other items on the flex line.

.card { display: flex; align-items: stretch; } .card__button { align-self: center; }

Move a featured item visually

A negative order value places this item before siblings in the default order group without editing the HTML.

.featured-item { order: -1; }

Build practical layouts

Auto Margins and Common Layout Patterns

Auto margins absorb available space along an axis. Combined with flexible sizing and alignment, they provide concise solutions for navigation, cards, toolbars, and page layouts.

Common auto margin patterns used with Flexbox
Pattern Effect Declaration Copy
Push right in a row Consumes available space before the item and moves it toward the main end. margin-inline-start: auto;
Push down in a column Consumes available space above the item in a typical vertical writing mode. margin-top: auto;
Center one item Auto margins on both sides divide the available space. margin-inline: auto;
Center on both axes All four auto margins absorb available space around one flex item. margin: auto;

Navigation with a separated action

A logical auto margin pushes the account action away from the preceding navigation links.

.navigation { display: flex; align-items: center; gap: 1rem; } .navigation__account { margin-inline-start: auto; }

Keep a card action at the bottom

Make the card a column flex container and let the action absorb remaining space above itself.

.card { display: flex; flex-direction: column; } .card__action { margin-top: auto; }

Media object

Keep an image at a stable size while the text area uses the remaining width and safely handles long content.

.media { display: flex; align-items: flex-start; gap: 1rem; } .media__image { flex: 0 0 5rem; } .media__content { flex: 1 1 auto; min-width: 0; }

Page footer at the bottom

A column page wrapper can expand the main content so a short page still places its footer at the viewport bottom.

.page { display: flex; flex-direction: column; min-height: 100vh; } .page__main { flex: 1; }

Adapt layouts without breaking meaning

Responsive Flexbox and Accessibility

Responsive Flexbox layouts should reflow cleanly at narrow widths while preserving logical source order, readable content, keyboard navigation, and usable controls.

Responsive and accessible Flexbox practices
Practice Why it matters Example Copy
Allow wrapping Prevents a row of items from being forced beyond a narrow viewport. flex-wrap: wrap;
Reset automatic minimum width Allows long text and nested content to shrink within flexible row items. min-width: 0;
Use logical spacing Adapts separation to different text directions and writing systems. margin-inline-start: auto;
Preserve source order Keeps visual reading, keyboard focus, and assistive-technology order consistent. order: 0;
Use flexible control sizing Helps controls remain readable and usable when text is enlarged. min-height: 2.75rem;

Responsive component direction

Stack content at narrow widths and switch to a row only when enough space is available.

.feature { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 48rem) { .feature { flex-direction: row; align-items: center; } }

Responsive layout without a breakpoint

A flexible basis and wrapping can create a useful card layout that adapts naturally to available space.

.card-list { display: flex; flex-wrap: wrap; gap: 1rem; } .card { flex: 1 1 18rem; min-width: 0; }

Experiment and solve problems

Flexbox Playground, Troubleshooting, and FAQ

Change common container properties, preview the result immediately, and copy the generated CSS. Use the troubleshooting guide and FAQ when a Flexbox layout behaves unexpectedly.

Interactive CSS generator

Build a Flexbox Layout

Adjust the controls to update the preview and generated CSS.

16px
5

Live preview

1 2 3 4 5 6 7 8

Generated container CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

Preview ready.

Flexbox Troubleshooting

Common Flexbox problems, likely causes, and fixes
Problem Likely cause Recommended fix
justify-content appears ineffective No positive free space remains on the main axis. Inspect item sizes, growth, and auto margins before changing alignment.
align-content does nothing The container has only one flex line or no extra cross-axis space. Enable wrapping, create multiple lines, and provide a constrained cross size.
Long text causes horizontal overflow The flex item retains its automatic content-based minimum size. Apply min-width: 0 and an appropriate text-wrapping rule.
Items do not wrap The container still uses the initial flex-wrap: nowrap. Set flex-wrap: wrap and give items a suitable basis.
Columns are not equally wide Items use different content-based flex bases. Use the same shorthand, such as flex: 1 1 0, on each item.
An item becomes unexpectedly narrow It is participating in negative free-space distribution. Review flex-shrink, the item’s basis, and minimum size.

Flexbox FAQ

What is CSS Flexbox best used for?

Flexbox is best suited to one-dimensional layouts where items must be arranged, aligned, or distributed primarily in a row or a column.

Should I use Flexbox or CSS Grid?

Use Flexbox when one axis is the primary concern. Use Grid when rows and columns need coordinated two-dimensional control. Both can be combined within the same page.

How do I center an item with Flexbox?

Set justify-content: center for the main axis and align-items: center for the cross axis on the flex container.

Why is my flex item overflowing?

Its content-based minimum size, a fixed basis, disabled shrinking, or unbreakable content may be preventing it from becoming smaller. A common row-layout fix is min-width: 0.

Does the order property change keyboard navigation?

No. It changes visual placement but does not reliably change DOM, reading, or keyboard focus order. Keep the source order logical.

Continue learning

Flexbox Resources and Related Cheat Sheets

Verify advanced behavior in the official CSS specifications or continue with related HTML, Regex, and Linux references.