glunty

CSS Flexbox Cheat Sheet

A searchable reference of CSS flexbox properties, values, and ready-to-use layout recipes.

Property Value What it does
display flex Turn an element into a block-level flex container so its direct children become flex items.
display inline-flex Make a flex container that flows inline with surrounding text while its children still lay out as flex items.
flex-direction row Lay items along a horizontal main axis, left to right (the default).
flex-direction row-reverse Lay items along a horizontal main axis but reverse their order, right to left.
flex-direction column Stack items top to bottom, making the main axis vertical.
flex-direction column-reverse Stack items bottom to top, making the main axis vertical and reversed.
flex-wrap nowrap Keep all items on one line and shrink them if needed (the default).
flex-wrap wrap Allow items to flow onto multiple lines when they run out of room.
flex-wrap wrap-reverse Wrap onto multiple lines but stack the new lines in the opposite cross-axis direction.
flex-flow row wrap Shorthand that sets flex-direction and flex-wrap in one declaration.
justify-content flex-start Pack items toward the start of the main axis (the default).
justify-content flex-end Pack items toward the end of the main axis.
justify-content center Center the group of items along the main axis.
justify-content space-between Spread items so the first and last touch the edges and the gaps between are equal.
justify-content space-around Give every item equal space on both sides, so edge gaps are half the size of gaps between items.
justify-content space-evenly Make every gap equal, including the space before the first and after the last item.
align-items stretch Stretch items to fill the cross axis when they have no fixed cross size (the default).
align-items flex-start Align items to the start of the cross axis.
align-items flex-end Align items to the end of the cross axis.
align-items center Center items along the cross axis.
align-items baseline Align items so their text baselines sit on the same line.
align-content center Center the wrapped lines as a group on the cross axis; only affects multi-line containers.
align-content space-between Distribute wrapped lines with the first and last against the edges; needs flex-wrap: wrap.
align-self center Override align-items for a single item, centering just that one on the cross axis.
gap 1rem Set equal spacing between rows and columns of items without adding outer margins.
row-gap 1rem Set the vertical spacing between wrapped rows of items.
column-gap 1rem Set the horizontal spacing between items in a row.
flex-grow 1 Let an item grow to absorb leftover free space; the number is its share relative to siblings.
flex-grow 0 Stop an item from growing past its basis size (the default).
flex-shrink 1 Let an item shrink when space is tight; the number is its shrink share (the default).
flex-shrink 0 Stop an item from shrinking so it keeps its basis size even when space runs out.
flex-basis auto Size an item from its content or width before free space is distributed (the default).
flex-basis 200px Set the starting main-axis size of an item before grow and shrink are applied.
flex 1 Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0, so siblings share space equally.
flex auto Shorthand for 1 1 auto; items grow and shrink but start from their content size.
flex none Shorthand for 0 0 auto; the item keeps its size and neither grows nor shrinks.
flex 0 0 200px A fixed 200px item that will not grow or shrink, written as grow shrink basis.
order 1 Change an item visual position; higher numbers move it later, lower or negative move it earlier.
Center both axes display: flex; justify-content: center; align-items: center; Perfectly center one or more children horizontally and vertically inside the container.
Equal-width columns container: display: flex; each child: flex: 1; Give every child an equal share of the row width regardless of its content.
Sticky footer row container: display: flex; flex-direction: column; min-height: 100vh; footer: margin-top: auto; Push the footer to the bottom of a full-height column layout.
Responsive wrap container: display: flex; flex-wrap: wrap; gap: 1rem; each card: flex: 1 1 200px; Cards sit side by side and wrap onto new rows on narrow screens, never below 200px.
Push item to the end container: display: flex; one item: margin-left: auto; Send a single item, such as a nav action, to the far end while the rest stay at the start.
Space out a nav bar display: flex; justify-content: space-between; align-items: center; Put a logo at one end and links at the other, all vertically centered.
Fixed sidebar, fluid main container: display: flex; sidebar: flex: 0 0 250px; main: flex: 1; Keep a 250px sidebar at a fixed width while the main area fills the rest.

Runs entirely in your browser. Nothing you type is sent anywhere; open DevTools and watch the Network tab to verify zero requests.

What this tool does

This is a searchable quick reference for CSS flexbox, the layout model for arranging items in a single row or column. It covers the properties you set on the flex container, the main-axis and cross-axis alignment options, the grow, shrink, and basis controls you set on individual items, and a set of copy-ready recipes for common layouts. Each row pairs a property and value with a plain-English note on what it does. The whole sheet is built into the page, so it works offline and sends nothing anywhere.

How to use it

Start typing in the Filter box to search across the property, value, and description columns at once. Entering center surfaces the centering options and recipes; entering wrap shows the wrapping controls; entering grow narrows to the flex-grow rows. The category buttons (Container, Justify, Align, Items, Patterns) limit the table to one family and combine with the text filter, so you can pick Patterns and type footer to jump straight to the sticky footer recipe. Clear the box to see the full sheet again.

Common use cases

  • Recalling which property lives on the container versus on an individual item.
  • Copying a ready-made recipe like center both axes or equal-width columns into your stylesheet.
  • Checking what flex: 1 expands to before you rely on the shorthand.
  • Deciding between justify-content and align-items for the alignment you want.
  • Reviewing the full flexbox model before an interview or a code review.

Common pitfalls

  • Confusing the main axis with the cross axis. justify-content works along the main axis and align-items along the cross axis. When you switch flex-direction to column the two swap physical directions, so a rule that centered horizontally now centers vertically.
  • Treating flex-basis like width. flex-basis sets the starting main-axis size before growing and shrinking, and it can be overridden by min-width or max-width. If an item refuses to shrink below its content, a min-width is often the reason.
  • Items shrinking and squishing content. By default every item has flex-shrink: 1, so a long item can be crushed narrower than you expect. Set flex-shrink: 0 on anything that must keep its size, such as an icon or a fixed sidebar.
  • Reaching for margins instead of gap or auto margins. Use gap for even spacing between items, and margin-left: auto (or margin-top: auto in a column) to push a single item to the far end without hand-tuning padding.

Frequently asked questions

What is the difference between justify-content and align-items?
justify-content controls how items are spaced along the main axis, which is horizontal when flex-direction is row and vertical when it is column. align-items controls how items line up on the cross axis, the direction perpendicular to the main axis. In a normal row, justify-content moves items left and right while align-items moves them up and down. Switching flex-direction to column swaps which physical direction each one controls.
What does flex: 1 mean?
flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, and flex-basis: 0. It tells an item to grow and shrink freely and to start from a zero base size, so several siblings all set to flex: 1 end up with equal widths. It is the quickest way to build equal columns that share the available space evenly.
What is the difference between flex-basis and width?
flex-basis sets the starting size of an item along the main axis before flex-grow and flex-shrink redistribute space, and it only applies inside a flex container. width sets a size on any element regardless of layout. When both are set on a flex item, a length flex-basis usually wins on the main axis, though min-width and max-width still clamp the final result. Use flex-basis when you want a starting size that flex can then grow or shrink.
How do I center a div with flexbox?
Set the parent to display: flex, then add justify-content: center to center on the main axis and align-items: center to center on the cross axis. Together they place the child in the exact middle both horizontally and vertically. This works even when you do not know the size of the child ahead of time.
When should I use flexbox versus CSS grid?
Reach for flexbox when you are laying out content in a single direction, a row or a column, and you want items to size themselves around their content. Use CSS grid when you need control over two dimensions at once, rows and columns together, such as a page template or a photo gallery. The two work well together: a grid can hold the overall page while flexbox arranges the contents of each area.
Why do my flex items not wrap onto a new line?
By default a flex container uses flex-wrap: nowrap, which forces every item onto one line and shrinks them to fit. Add flex-wrap: wrap to the container so items can flow onto new lines when they run out of room. Pair it with a gap value and a sensible flex-basis on the items to control when the wrap happens.
Does this cheat sheet send anything to a server?
No. The whole reference is built into the page and every search and filter runs in your browser with JavaScript, so nothing you type leaves your device. Open your browser DevTools and watch the Network tab while you use it to confirm there are zero requests.

Embed this tool

Free for any use; attribution appreciated. Paste this on your site:

The embed runs the same tool that lives at this URL. No tracking; no ads inside the embed. Resize height as needed for your layout.

Cite this tool

For academic, journalistic, or technical references. Pick a format:

Citations use 2026 as the publication year. Access date is left as a fillable placeholder where the citation style expects one.

Embedded tool from glunty.com