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.

CSS Flexbox Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, 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.

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.