Flexbox

Visual cheat sheet for CSS Flexible Box Layout — every property with live previews you can copy. The dashed box is the flex container.

Click any example to copy its CSS.

Flex container

flex lays children out in a row. inline-flex does the same, but the container only takes the width it needs.

Sets the main axis — the direction items flow in.

nowrap squeezes every item onto one line; wrap moves items that don't fit onto new lines.

Shorthand for flex-direction and flex-wrap.

Distributes items and free space along the main axis.

Aligns items on the cross axis. Items here have different heights so you can see the difference.

Distributes wrapped lines on the cross axis (only matters when items wrap).

Space between items and between wrapped lines — never at the edges.

Moves an item earlier or later than its position in the HTML. Default is 0.

How much of the free space an item takes. Here the other items have flex-grow: 1.

How much an item gives up when there isn't enough room. Each item here wants 50% of the width.

The item's starting size on the main axis, before free space is shared out.

Shorthand for flex-grow, flex-shrink and flex-basis. The other items here have flex: 1.

Overrides align-items for one item. The container here uses align-items: flex-start.

An auto margin soaks up all free space on that side — the easy way to push items apart.