CSS Tags
Search

Theme
Theme creator

Tune semantic inputs, preview them live, then export a trailing CSS layer.

Starting points
Color
Shape and spacing
Typography
Export theme

Load the generated file after css-tags.

Using documentation defaults.
GitHub

Flexbox

A visual guide to one-dimensional layout with container and item controls for direction, wrapping, alignment, sizing, and order.

The flex primitive is a thin declarative layer over CSS Flexbox. Use <flex>, [data-flex], or .flex; all three hosts accept the same attributes. The examples below are deliberately visual and cover the parent and child controls separately.

Flexbox vocabulary

Every flex layout has a main axis and a cross axis. direction chooses the main axis, justify distributes items along it, and align positions items across it. Changing from a row to a column changes what “main” and “cross” mean.

Main axis and cross axis

The same alignment values operate on different physical directions when the main axis changes.

row · main axis →

1
2
3

column · main axis ↓

1
2
3

Properties for the container

Direction

direction accepts row, row-reverse, column, and column-reverse. Reversed visual order does not change reading or keyboard order, so use it only when the source order remains meaningful.

Four flex directions

Follow the numbered items to see where the main axis begins and ends.

row

1
2
3

row-reverse

1
2
3

column

1
2
3

column-reverse

1
2
3
 
<flex direction="row-reverse">...</flex>
<div data-flex direction="column">...</div>
<section class="flex" direction="column-reverse">...</section>

Wrapping

Items stay on one line by default. Add wrap="wrap" to create more flex lines when their bases no longer fit.

No wrap compared with wrap

Each item requests a 9rem basis; only the second container may create new lines.

nowrap

Alpha
Beta
Gamma
Delta

wrap

Alpha
Beta
Gamma
Delta

Use wrap="wrap-reverse" when new lines should accumulate toward the opposite cross-axis edge. It reverses lines, not the order of items within each line.

Main-axis distribution

justify controls how unused space is distributed along the main axis. The six common arrangements are easier to compare when the items keep an intrinsic size.

justify-content values

flex-start

ABC

flex-end

ABC

center

ABC

space-between

ABC

space-around

ABC

space-evenly

ABC

gap remains a minimum gutter when used with a space-distribution value. For most navigation and toolbar layouts, space-between plus an explicit gap is the resilient combination.

Cross-axis alignment

align sets the default align-items value for every direct child. The stage has extra block size so the difference is visible.

align-items values

stretch

Short
Two
lines

flex-start

Short
Two
lines

center

Short
Two
lines

flex-end

Short
Two
lines

baseline

Large
body
small

Multi-line alignment

align-content distributes flex lines, so it only has an effect when wrapping creates multiple lines and the container has spare cross-axis space.

align-content across wrapped lines

Both stages contain the same wrapping items; their lines occupy the cross axis differently.

space-between

1
2
3
4
5

center

1
2
3
4
5

Gaps between items and lines

The gap attribute accepts any valid CSS gap value, including separate row and column gaps.

Row and column gaps
One
Two
Three
Four
Five
 
<flex wrap="wrap" gap="2rem 0.5rem">...</flex>

Properties for flex items

Item attributes belong on direct children of the flex host. They map to flex-grow, flex-shrink, flex-basis, order, and align-self.

Growing into free space

grow divides leftover main-axis space proportionally. A value of 2 receives twice the share of a sibling with 1; it does not necessarily make the whole item twice as wide because the starting sizes still count.

flex-grow ratios

The middle item receives two shares of the available free space.
grow 1
grow 2
grow 1

Shrinking under pressure

shrink controls how items give up space when their requested bases do not fit. Set shrink="0" for a genuinely non-shrinking control or media region, then make sure the remaining content can safely become narrower.

flex-shrink under pressure

The fixed item keeps its 12rem basis while the flexible item absorbs the shortage.
shrink 0
shrink 1 — this item gives up space

Setting the hypothetical size

basis sets an item’s starting size on the main axis. In a row it behaves much like width; in a column it behaves much like height.

flex-basis follows the main axis

row: basis controls inline size

5rem
10rem

column: basis controls block size

5rem
10rem

Visual order

Lower order values appear first. This changes visual placement only, not DOM, reading, focus, or screen-reader order.

Item ordering
DOM 1 · order 3
DOM 2 · order 1
DOM 3 · order 2

Prefer putting content in the correct source order. Reserve order for presentation where the alternate visual sequence does not change meaning or interaction.

Individual cross-axis alignment

align-self overrides the container’s align value for one item.

align-self overrides

The container centers by default; the first and last items opt into opposite edges.
flex-start
auto → center
stretch
flex-end

Auto margins

Auto margins absorb free space before alignment distributes it. This native CSS technique is especially useful for pushing one action to the far edge.

Auto margin navigation

Practical compositions

These examples combine the same primitives into recognizable interface patterns.

Responsive navigation

Wrapping keeps every destination available without a JavaScript menu.

Media object

The avatar does not shrink; the text region grows and remains allowed to become narrow.

Avery Gray

Flexbox is ideal when one region has an intrinsic size and its sibling should take the remaining line.

Card row with equal-width items

A shared basis and equal grow values produce equal columns; wrapping provides the narrow-screen fallback.

Starter

For personal experiments.

Team

For collaborative projects with shared controls.

Scale

For larger organizations.

API reference

Container attributes:

AttributeCSS equivalentDefault
directionflex-directionrow
wrapflex-wrapnowrap
justifyjustify-contentflex-start
alignalign-itemsstretch
align-contentalign-contentstretch
gapgap1.5rem

Direct-child attributes:

AttributeCSS equivalentDefault
growflex-grow0
shrinkflex-shrink1
basisflex-basisauto
orderorder0
align-selfalign-selfauto

All attribute values accept normal CSS values through typed attr(... type(*)) parsing. The same values can be themed with --flex-direction, --flex-wrap, --justify-content, --align-items, --align-content, and --gap when a custom property is the better integration point.

<div data-flex wrap="wrap" justify="space-between" gap="var(--space-md)">
  <article grow="1" basis="16rem">Flexible content</article>
  <aside shrink="0" basis="12rem" align-self="flex-start">Supporting content</aside>
</div>

Flexbox is one-dimensional: it distributes items across one main axis and optionally creates additional lines. Use the grid primitive when rows and columns must align as a coordinated two-dimensional system.