Flex

CSS Flex Summary

Flexbox arranges items in one main direction and helps distribute space between them.

.nav {
	display: flex;
	gap: 16px;
}

The element with display: flex becomes the flex container. Its direct children become flex items.

Flex Direction Sets The Main Direction

By default, flex items line up in a row. You can change the main direction with flex-direction.

.stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

A column direction stacks the flex items vertically.

Justify Content Controls Main-Axis Space

justify-content controls how extra space is distributed along the main direction.

.toolbar {
	display: flex;
	justify-content: space-between;
}

In a row, this affects horizontal spacing. In a column, it affects vertical spacing.

Align Items Controls Cross-Axis Alignment

align-items controls alignment across the opposite direction.

.media-card {
	display: flex;
	align-items: center;
	gap: 20px;
}

In a row, this usually controls vertical alignment.

Flex Wrap Allows New Lines

flex-wrap: wrap lets flex items move onto another line when there is not enough room.

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

Use Grid instead when the design needs a more deliberate row-and-column structure.