What is the difference between container and item properties?

Container properties are set on the flex parent (display: flex) and control how children are laid out, such as flex-direction and justify-content. Item properties are set on the children and control individual behavior, such as flex-grow and align-self.

What does the flex shorthand expand to?

flex is shorthand for flex-grow, flex-shrink, and flex-basis. flex: 1 means flex: 1 1 0%, while flex: auto means 1 1 auto and flex: none means 0 0 auto.

What is the default flex-direction?

The default is row, which lays items along the inline (horizontal in left-to-right languages) axis. Use column to stack vertically, or the -reverse variants to flip the order.

How do justify-content and align-items differ?

justify-content aligns items along the main axis (the flex-direction), while align-items aligns them along the cross axis (perpendicular). Swapping flex-direction swaps which physical direction each one affects.

Does this reference need the internet?

No. The full property table ships with the page and the search runs entirely in your browser, so it works offline once loaded.

What is the CSS Flexbox Reference?

Interactive CSS Flexbox reference covering all flex container and flex item properties with their accepted values, defaults, and short descriptions. Filter by name or value to find the property you need fast. It runs free in your browser on Gera Tools, with nothing uploaded.

CSS Flexbox Reference

Name: CSS Flexbox Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Get one useful tool a week

Like this tool? Enter your email and we'll send you one genuinely useful Gera tool a week — plus a link to come back to this one. No spam, one-click unsubscribe any time.

CSS Flexbox reference

Flexbox is a one-dimensional layout model: you lay items out along a main axis and align them on the cross axis. Properties split into two groups — those you set on the flex container and those you set on the flex items. This reference lists every standard property in each group with its accepted values, default, and a concise description, plus instant search.

How it works

Flex layout starts when a container gets display: flex (or inline-flex). The container properties — flex-direction, flex-wrap, justify-content, align-items, align-content, and gap — decide the axis and how children distribute and align. The item properties — order, flex-grow, flex-shrink, flex-basis, the flex shorthand, and align-self — override or tune individual children. The search filter matches both property names and their listed values so you can look up by either.

How `justify-content` values distribute space

justify-content is the most frequently looked-up flexbox property. Its values differ in where the extra space goes:

flex-start — items packed toward the start of the main axis; all space at the end.
flex-end — items packed toward the end; all space at the start.
center — items grouped in the middle; equal space on both ends.
space-between — equal gaps between items; no space at the outer edges. Good for navigation bars.
space-around — equal space around each item, so edge items get half as much space from the wall as adjacent items get between each other.
space-evenly — equal space between items and between items and the edges. Cleaner than space-around for most designs.

The `flex` shorthand decoded

flex is shorthand for flex-grow flex-shrink flex-basis. The common single-value keywords resolve to:

Shorthand	Expands to	Meaning
`flex: 1`	`1 1 0%`	Grows and shrinks; starts from zero (equal sharing)
`flex: auto`	`1 1 auto`	Grows and shrinks; starts from intrinsic size
`flex: none`	`0 0 auto`	Rigid; does not grow or shrink
`flex: 0`	`0 1 0%`	Cannot grow; can shrink; zero basis

The difference between flex: 1 and flex: auto matters when items have different intrinsic widths. With flex: auto, larger items keep more space proportional to their content; with flex: 1, all items start from the same zero baseline and share space equally regardless of content.

Tips and example

A common centered layout:

.box {
  display: flex;
  justify-content: center; /* main-axis centering */
  align-items: center;     /* cross-axis centering */
  gap: 1rem;
}

Remember flex: 1 equals flex: 1 1 0% — items grow from a zero basis and share space evenly.
align-items sets the default for all children; align-self overrides it on one child.
gap works in flexbox in modern browsers, so you rarely need margins between items anymore.
When you change flex-direction to column, the axes swap — justify-content becomes vertical and align-items becomes horizontal. Everything else behaves the same.