Why does align-content do nothing?

MDN: align-content has no effect on a single-line flex container, one with flex-wrap: nowrap. The generator disables the Align Content menu and leaves the property out of the code until you choose wrap or wrap-reverse; with wrap and center it writes align-content: center.

How do I center an item with flexbox?

Set justify-content: center and align-items: center on the container. The Center preset does both with 1 item and gap 0px, which in Tailwind is flex flex-row flex-nowrap justify-center items-center gap-0. The item only moves down to the middle when the container is taller than the item.

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

justify-content aligns items on the main axis and align-items on the cross axis (MDN). flex-direction decides which is which: with row the main axis runs across the line in a horizontal writing mode such as English, and with column it runs down.

What does flex: 1 1 200px mean?

flex-grow 1, flex-shrink 1 and flex-basis 200px. Click item 1 in the preview, set Flex Grow to 1 and Flex Basis to 200px, and the generator adds .item-1 { flex: 1 1 200px; }, or [flex-grow:1] [flex-basis:200px] in Tailwind. It writes the shorthand only when one of the three differs from 0 1 auto.

Does the generator give me the HTML too?

Yes. For CSS, SCSS and Variables it shows the markup the code applies to: a div with the class container holding item-1 to item-N, one per item (1 to 20). The Tailwind tab is markup only: the container classes on the outer div and each item as a numbered div. An item you have not changed is a plain 1 with no class attribute; an item you changed carries its own arbitrary-property classes, such as [flex-grow:1] or [order:2].

CSS Flexbox Generator

Set flex-direction, wrap, justify-content, align-items, gap and per-item flex, order and align-self, then copy the code as CSS, SCSS, variables or Tailwind. How it works

Presets:

Flex Direction

Flex Wrap

Justify Content

Align Items

Align Content

Align Content has no effect while Flex Wrap is nowrap (there is only one line), so it is left out of the code. Choose wrap or wrap-reverse to use it.

CSS

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 8px;
}

HTML

<div class="container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</div>

Items

Gap Mode

Gap (8px)

About the CSS Flexbox Generator

With the default settings the flexbox generator writes .container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 8px; } for 4 items; the Tailwind tab puts the same layout on a markup snippet whose outer div has class="flex flex-row flex-nowrap justify-start items-stretch gap-[8px]". align-content is added only once Flex Wrap is wrap or wrap-reverse, because it does nothing on a single line. An item you change gets its own .item-N rule in the CSS format and its own classes in the Tailwind format; SCSS and Variables write the container only.

Presets

Preset	Items	Container declarations after display: flex	Tailwind classes
Navbar	3	flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 16px;	flex flex-row flex-nowrap justify-between items-center gap-[16px]
Center	1	flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0px;	flex flex-row flex-nowrap justify-center items-center gap-0
Sidebar	2	flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0px;	flex flex-row flex-nowrap justify-start items-stretch gap-0
Card Grid	6	flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; align-content: flex-start; gap: 16px;	flex flex-row flex-wrap justify-start items-stretch content-start gap-[16px]
Stack	4	flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 12px;	flex flex-col flex-nowrap justify-start items-stretch gap-[12px]

Card Grid is the only preset that wraps, so it is the only one with align-content.

flex-basis values

You type	Accepted
auto	Yes
200px	Yes
25%	Yes
0	Yes
max-content	Yes
calc(100% - 20px)	Yes
calc(min(50%, 300px))	Yes
calc(2 * 50px)	Yes
calc(100%-20px)	No
min(50%, 300px)	Yes
clamp(10rem, 30%, 400px)	Yes
clamp(10rem, 30%)	No
-10px	No
10	No

Inside calc(), + and - need a space on each side. min(), max() and clamp() are accepted on their own or inside calc(); clamp() needs three arguments. A refused value shows a message and the last valid value stays in the code.

Frequently asked questions

Why does align-content do nothing?: MDN: align-content has no effect on a single-line flex container, one with flex-wrap: nowrap. The generator disables the Align Content menu and leaves the property out of the code until you choose wrap or wrap-reverse; with wrap and center it writes align-content: center.
How do I center an item with flexbox?: Set justify-content: center and align-items: center on the container. The Center preset does both with 1 item and gap 0px, which in Tailwind is flex flex-row flex-nowrap justify-center items-center gap-0. The item only moves down to the middle when the container is taller than the item.
What is the difference between justify-content and align-items?: justify-content aligns items on the main axis and align-items on the cross axis (MDN). flex-direction decides which is which: with row the main axis runs across the line in a horizontal writing mode such as English, and with column it runs down.
What does flex: 1 1 200px mean?: flex-grow 1, flex-shrink 1 and flex-basis 200px. Click item 1 in the preview, set Flex Grow to 1 and Flex Basis to 200px, and the generator adds .item-1 { flex: 1 1 200px; }, or [flex-grow:1] [flex-basis:200px] in Tailwind. It writes the shorthand only when one of the three differs from 0 1 auto.
Does the generator give me the HTML too?: Yes. For CSS, SCSS and Variables it shows the markup the code applies to: a div with the class container holding item-1 to item-N, one per item (1 to 20). The Tailwind tab is markup only: the container classes on the outer div and each item as a numbered div. An item you have not changed is a plain <div>1</div> with no class attribute; an item you changed carries its own arbitrary-property classes, such as [flex-grow:1] or [order:2].

Navbars, centered boxes, sidebars and card rows

The five presets cover common flexbox layouts: a Navbar with the logo and links pushed apart by space-between, a Center box, a Sidebar beside a main column, a Card Grid that wraps onto new lines and a vertical Stack. Start from one, check it in the preview at 375, 768 or 1440 px wide, and copy the result as plain CSS, SCSS variables, CSS custom properties or Tailwind markup.

Click an item in the preview to give it its own flex, order or align-self. For the Sidebar, for example, give item 2 Flex Grow 1 so the main column takes the space the sidebar leaves.

Main axis and cross axis

flex-direction sets the main axis: row makes it horizontal in a writing mode such as English, column makes it vertical. justify-content aligns items on the main axis and align-items on the cross axis. align-content places the lines of a wrapping container on the cross axis and has no effect while flex-wrap is nowrap, so the generator leaves it out of the code until you choose wrap or wrap-reverse.

In the CSS format an item you change gets an .item-N rule: the shorthand flex: grow shrink basis when any of the three differs from 0 1 auto, plus order and align-self when you change them. The Tailwind format puts the same settings on the item as classes; SCSS and Variables write the container only.

Example: the default 4 items with item 1 set to Flex Grow 1 and Flex Basis 200px give .container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 8px; } and .item-1 { flex: 1 1 200px; }.

Flex Basis takes auto, content, min-content, max-content, fit-content, 0, a length, a percentage or calc(). Inside calc() a + or - needs a space on each side, so calc(100%-20px) is refused and the last valid value stays in the code.

Related Tools

View all tools

CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.