Flex

CSS Flex Summary

Flex is a CSS layout tool that makes it easier to place boxes in a row or column, add space between them, and line them up.

.cards {
	display: flex;
	gap: 20px;
}

Flex starts by adding display: flex; to a parent element. The direct children inside that parent become flex items.

.cards {
	display: flex;
}

This is commonly used for navigation links, buttons, cards, columns, and groups of small items.

Flex direction controls whether the items go across the page or down the page.

.cards {
	display: flex;
	flex-direction: row;
}

Row is the default. It places items side by side.

.cards {
	display: flex;
	flex-direction: column;
}

Column stacks the items from top to bottom.

Gap adds space between flex items. It is usually easier than adding margin to every item.

.cards {
	display: flex;
	gap: 20px;
}

justify-content controls how flex items are spaced across the main direction.

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

This can push items apart across the available space.

align-items controls how flex items line up in the other direction. It is often used to vertically center items in a row.

.nav {
	display: flex;
	align-items: center;
}

Flex items can wrap onto a new line when there is not enough room.

.cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

This is useful for groups of cards that need to fit different screen sizes.