CSS Flexbox Generator

Pick the container properties from four menus and two sliders, and copy a complete display: flex rule along with a note of which axis each alignment property is acting on.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Live preview

Flex container

CSS

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

Child CSS

.container > * {
  flex: 0 1 auto;
}

Summary

Main axis: Horizontal
Main-axis alignment: space-between
Cross-axis alignment: center

Quick answers

How do I center a div with flexbox?: Put three declarations on the parent: display: flex; justify-content: center; align-items: center. The child is then centered horizontally and vertically. The parent needs a height taller than the child, for example min-height: 100vh, for the vertical centering to be visible.
What is the difference between justify-content and align-items?: justify-content positions items along the main axis and align-items positions them along the cross axis. In a row the main axis is horizontal, so justify-content works left to right and align-items top to bottom. In a column the two swap.
What is the difference between space-between, space-around and space-evenly?: space-between puts the first and last items against the edges and shares the free space between items. space-around gives every item equal space on both sides, so the edge gaps are half the inner gaps. space-evenly makes every gap equal, edges included.
Does gap work with flexbox?: Yes. gap on a flex container adds space between items and between wrapped lines, and never at the outer edges. It is supported in every current browser; Safari was the last to add it, in version 14.1.
What does flex: 0 1 auto mean?: It is shorthand for flex-grow: 0, flex-shrink: 1 and flex-basis: auto, which is the default for every flex item. Items keep their content or declared size, do not grow into spare space, and shrink when the container is too small.
When should I use flexbox instead of grid?: Use flexbox when items run in one direction and their sizes come from their content: nav bars, toolbars, button groups, a row of tags. Use grid when rows and columns must line up with each other, such as a page layout or a card gallery with equal tracks.

Why use Flexbox Generator

A flex layout is set almost entirely on the parent: display: flex, a direction, how items are spread along that direction, how they line up across it, whether they wrap and how much space sits between them. This generator covers exactly those container properties: flex-direction, justify-content, align-items and flex-wrap as menus, plus Gap and Padding from 0 to 64 pixels. It writes a seven-line .container rule and a child rule of flex: 0 1 auto, and a Summary panel states whether the main axis is horizontal or vertical for the direction you chose. Per-item settings such as flex-grow, order and align-self are not part of the tool.

Flexbox settings for common layouts

Menu choices for layouts people build most often. Set Gap and Padding to taste.

Layout	flex-direction	justify-content	align-items	flex-wrap
Center one element both ways	row	center	center	nowrap
Header with logo left, nav right	row	space-between	center	nowrap
Row of tags or chips that wraps	row	flex-start	flex-start	wrap
Card row with equal-height cards	row	flex-start	stretch	wrap
Stacked form fields at full width	column	flex-start	stretch	nowrap
Sidebar with a link pinned to the bottom	column	space-between	stretch	nowrap
Evenly spread icon bar	row	space-evenly	center	nowrap
Buttons aligned to the right of a dialog	row	flex-end	center	nowrap

Equal-height cards rely on align-items: stretch, which only works when the cards have no fixed height of their own.

Generated CSS for three container setups

Defaults when the page loads

flex-direction row, justify-content space-between, align-items center, flex-wrap wrap, Gap 16, Padding 16

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

Summary: Main axis Horizontal, Main-axis alignment space-between, Cross-axis alignment center.

Centering in both directions

flex-direction row, justify-content center, align-items center, flex-wrap nowrap, Gap 0, Padding 0

.container { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 0px; padding: 0px; }

Add a height or min-height to the container yourself; the tool does not set one.

Vertical form stack

flex-direction column, justify-content flex-start, align-items stretch, flex-wrap nowrap, Gap 12, Padding 24

.container { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 12px; padding: 24px; }

Summary: Main axis Vertical. justify-content now works top to bottom and align-items left to right.

Flex container properties and their default values

The output always writes every property, including ones left at the browser default. Lines that match the Browser default column can be deleted without changing the layout.

Property	Options in the tool	Browser default	Tool starts at
flex-direction	row, row-reverse, column, column-reverse	row	row
justify-content	flex-start, center, flex-end, space-between, space-around, space-evenly	Behaves as flex-start	space-between
align-items	stretch, flex-start, center, flex-end, baseline	Behaves as stretch	center
flex-wrap	nowrap, wrap, wrap-reverse	nowrap	wrap
gap	0 to 64px	0	16px
padding	0 to 64px	0	16px

Main axis and cross axis: why the alignment properties swap

Flexbox does not think in terms of horizontal and vertical. It has a main axis, set by flex-direction, and a cross axis at right angles to it. justify-content always works along the main axis and align-items always works along the cross axis.

With flex-direction: row the main axis runs left to right in English-language pages, so justify-content: center centers items horizontally. Change only the direction to column and the same declaration centers them vertically, while align-items takes over the horizontal placement. If a layout breaks after switching direction, this swap is nearly always the reason, and it is what the Summary panel spells out.

The reverse values keep the axis but flip its start and end. In row-reverse, flex-start is the right-hand edge and items are laid out right to left. The HTML order does not change, so keyboard focus and screen readers still follow the source order. Avoid the reverse directions for groups of links or form controls, where the visual order and the tab order would disagree.

What this generator leaves to you

Item properties. flex-grow, flex-shrink, flex-basis, order and align-self are not adjustable; the child rule is always flex: 0 1 auto. To make items share the row equally, change it to flex: 1.
align-content. Spacing between wrapped lines is not offered. Add it by hand when a wrapping container has spare cross-axis space.
Container size. No width, height or min-height is written, and vertical centering needs one.
Separate row and column gaps. Gap is one value for both. Write gap: 8px 16px yourself for a different row and column gap.
Multiple preview items. The preview box holds a single label, so centering and start or end alignment are visible there, while gap, wrapping and the space-between family only show an effect once the rule is applied to a container with several children.
HTML. Only CSS is produced. Any direct children of the element you apply .container to become flex items.

How to get your result

1
Choose flex-direction: row or row-reverse for a horizontal main axis, column or column-reverse for a vertical one.
2
Choose justify-content to place items along the main axis: flex-start, center, flex-end, space-between, space-around or space-evenly.
3
Choose align-items to place them across it: stretch, flex-start, center, flex-end or baseline.
4
Choose flex-wrap: nowrap keeps one line, wrap lets items flow onto new lines, wrap-reverse stacks new lines in the opposite direction.
5
Set Gap for the space between items and Padding for the space inside the container edge.
6
Copy or download the CSS panel for the container and the Child CSS panel for the items, then rename .container to your own class.

Frequently asked questions

Why is align-items: center not centering vertically?

In a row container with no set height, the container is only as tall as its tallest item, so there is no spare space to center within. Give the container a height or min-height. In a column container, align-items is horizontal; use justify-content for vertical placement.

Why are my flex items not wrapping?

flex-wrap defaults to nowrap, which shrinks items to fit one line. Set flex-wrap: wrap. If they still do not wrap, the items probably have a flex-basis of 0, as flex: 1 sets, so they always fit on one line; give them a base size such as flex: 1 1 200px.

Why is my flex item overflowing its container?

Flex items have an automatic minimum size equal to their content, so long words, wide images or pre-formatted text refuse to shrink. Add min-width: 0 to the item (or min-height: 0 in a column), or allow the container to wrap.

What is the difference between align-items and align-content?

align-items positions items within their own line. align-content positions the lines themselves within the container, so it only has an effect when flex-wrap is wrap or wrap-reverse and there is free space across the cross axis.

How do I push one item to the far end of a flex row?

Give that item an auto margin on the side facing the others: margin-left: auto sends it to the right end of a row. Auto margins absorb the free space before justify-content does, so the rest of the items stay grouped.

What does flex: 1 do compared with flex: 0 1 auto?

flex: 1 expands to flex: 1 1 0%, so every item starts from zero and takes an equal share of the container. flex: 0 1 auto, which this tool outputs, keeps each item at its content size and only lets it shrink.

Should I use gap or margins between flex items?

gap is simpler. It applies only between items, so there is no leftover margin on the first or last item to cancel out, and it also spaces wrapped lines. Margins are still useful for one-off adjustments on a single item.

Does display: flex affect the children's children?

No. Only direct children of the flex container become flex items. Deeper descendants are laid out normally inside their own parent, unless that parent is also given display: flex.