BaselineLab
0Support

CSS Flexbox playground

Build flexible layouts with visual controls for the container and each item’s individual properties, then copy the resulting HTML, CSS, or Tailwind.

Guide

Ask AI

CSS Flexbox playground

Response generated with openai/gpt-5.4-nano. AI can make mistakes. Always review the result.
Preview
HTML
<div class="flexbox">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>
Tailwind CSS
Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.
<div class="flex bg-orange-100 min-block-[20rem] gap-[16px]">
  <div class="min-inline-14 min-block-14 bg-blue-600 text-white">1</div>
  <div class="min-inline-14 min-block-14 bg-blue-600 text-white">2</div>
  <div class="min-inline-14 min-block-14 bg-blue-600 text-white">3</div>
  <div class="min-inline-14 min-block-14 bg-blue-600 text-white">4</div>
</div>
CSS
.flexbox {
  display: flex;
  background-color: #ffedd5;
  min-block-size: 20rem;
  gap: 16px;
}

.flexbox > * {
  min-inline-size: 3.5rem;
  min-block-size: 3.5rem;
  background-color: #2563eb;
  color: #ffffff;
}

Visual CSS guide

Understand Flexbox

Learn how the container, axes, and individual items relate to one another. Review the syntax and test guide examples in a connected preview.

Back to the playground

The Flexbox mental model

Flexbox distributes items in one dimension at a time. The container direction determines which axis is the main axis and which is the cross axis.

Two axes that change directionjustify-content works on the main axis. align-items and align-content act on the cross axis. Changing flex-direction also changes the orientation of both axes.

The container creates the flex context

display: flex turns direct children into flex items. The container controls flow, wrapping, alignment, and the space between those items.

Each item negotiates its size

flex-grow, flex-shrink, and flex-basis determine how space is distributed. align-self and order create individual exceptions.

Flex container properties

These properties apply to the parent element. They control direction, wrapping, and how the available space is distributed.

display

Activates the Flexbox formatting context for the element’s direct children.

Syntax
display: flex | inline-flex;
CSS initial value
inline
Values
flexinline-flex

The initial inline value does not create a flex formatting context. flex participates as a block in the outer flow; inline-flex behaves as an inline-level element.

Read the documentationOpens in a new tab

flex-direction

Defines the main axis and the direction in which items are placed.

Syntax
flex-direction: row | row-reverse | column | column-reverse;
CSS initial value
row
Values
rowrow-reversecolumncolumn-reverse

Reverse values change visual order, but they do not change DOM or reading order.

Read the documentationOpens in a new tab

flex-wrap

Determines whether items stay on one line or are distributed across several lines.

Syntax
flex-wrap: nowrap | wrap | wrap-reverse | balance;
CSS initial value
nowrap
Values
nowrapwrapwrap-reversebalance

balance attempts to balance content between lines and is still experimental. Check compatibility before using it in production.

Read the documentationOpens in a new tab

justify-content

Distributes free space between items along the main axis.

Syntax
justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;
CSS initial value
normal
Values
flex-startcenterflex-endspace-betweenspace-aroundspace-evenly

In a flex container, normal behaves as flex-start. This is not always horizontal alignment: with flex-direction: column, the main axis is vertical.

Read the documentationOpens in a new tab

align-items

Aligns every item within each line along the cross axis.

Syntax
align-items: stretch | flex-start | center | flex-end | baseline;
CSS initial value
normal
Values
stretchflex-startcenterflex-endbaseline

In Flexbox, normal behaves as stretch. Stretching only occurs while the item’s cross size remains automatic.

Read the documentationOpens in a new tab

align-content

Distributes the set of flex lines along the cross axis.

Syntax
align-content: stretch | flex-start | center | flex-end | space-between | space-around | space-evenly;
CSS initial value
normal
Values
stretchflex-startcenterflex-endspace-betweenspace-aroundspace-evenly

In Flexbox, normal behaves as stretch. It needs multiple lines and free cross-axis space; it has no visible effect with flex-wrap: nowrap.

Read the documentationOpens in a new tab

gap

Adds spacing between items and lines without using margins on the children.

Syntax
gap: <row-gap> <column-gap>?;
CSS initial value
normal
Values
<length><percentage>

In Flexbox, the initial normal value is equivalent to zero spacing. With two values, the first is row-gap and the second is column-gap.

Read the documentationOpens in a new tab

Flex item properties

Direct children can grow, shrink, start from a particular size, or override their individual alignment.

flex: 1 1 0;
grow, shrink, and basis form one negotiation

The flex shorthand expresses all three decisions together. flex: 1 1 0 lets several items start from zero, grow, and share the available space.

flex

Combines flex-grow, flex-shrink, and flex-basis in one declaration.

Syntax
flex: <flex-grow> <flex-shrink> <flex-basis>;
CSS initial value
0 1 auto
Values
initialautonone<number><width>

The auto, initial, and none keywords represent common combinations. Using the shorthand avoids partial states that are harder to reason about.

Read the documentationOpens in a new tab

flex-grow

Sets the proportion of positive free space that an item may receive.

Syntax
flex-grow: <number>;
CSS initial value
0
Values
01<number [0,∞]>

The number is a ratio relative to sibling items, not a width or percentage.

Read the documentationOpens in a new tab

flex-shrink

Sets how much an item may shrink when there is not enough space on the line.

Syntax
flex-shrink: <number>;
CSS initial value
1
Values
01<number [0,∞]>

Negative free space distribution also considers flex-basis, so two items with flex-shrink: 1 do not always shrink by the same amount.

Read the documentationOpens in a new tab

flex-basis

Sets the item’s base size before free space is distributed.

Syntax
flex-basis: auto | content | <width>;
CSS initial value
auto
Values
autocontent0<length><percentage>

With auto, the item’s main size is consulted. With 0, distribution depends mainly on grow factors.

Read the documentationOpens in a new tab

align-self

Overrides align-items for one item along the cross axis.

Syntax
align-self: auto | stretch | flex-start | center | flex-end | baseline;
CSS initial value
auto
Values
autostretchflex-startcenterflex-endbaseline

auto keeps the alignment defined by the container; other values create an individual exception.

Read the documentationOpens in a new tab

order

Changes the visual position of an item inside the flex container.

Syntax
order: <integer>;
CSS initial value
0
Values
-101<integer>

It does not change DOM order. Assistive technology reading order and sequential navigation keep the document order.

Read the documentationOpens in a new tab

Common Flexbox pitfalls

When a property appears not to work, there is usually no free space, there are not multiple lines, or the content’s minimum size is imposing a limit.

align-content does not align individual items

Expected result
Align items within a single line along the cross axis.
Cause
align-content distributes complete lines and has no effect with flex-wrap: nowrap, one line, or no free cross-axis space.
Solution
Use align-items to align items. To test align-content, enable wrapping, create at least two lines, and give the container free cross-axis space.

An item refuses to shrink

Expected result
Let the item shrink when the container runs out of space.
Cause
The automatic minimum size protects content and may stop the item shrinking even when flex-shrink is greater than 0.
Solution
Apply min-inline-size: 0 to the flexible child, then decide how its content should wrap or overflow.

Visual order is not reading order

Expected result
Make the visible order match reading and keyboard navigation order.
Cause
flex-direction: *-reverse and order move items visually without reorganizing the DOM.
Solution
Keep the correct semantic order in HTML and reserve visual reordering for content whose sequence carries no meaning.

width and flex-basis compete for the starting size

Expected result
Let width or height determine the item’s starting size on its own.
Cause
On the main axis, flex-basis normally defines the starting point. Only auto can defer to the main size or content.
Solution
Choose one sizing source deliberately: use flex-basis or the flex shorthand, and keep auto when you want width or height to set the base.

Flexbox compared with other layout models

The same layout can be built with different models, but each one relates elements and distributes space differently. Comparing them helps you choose the structure that best expresses the design.

display: flex;versusdisplay: grid;

One flexible axis or a two-dimensional grid

Flexbox distributes content mainly in one direction and lets items negotiate space. Grid coordinates rows and columns and defines a more explicit spatial structure.

Try this structure in the CSS Grid lab