Full and comprehensive guide where I brought the images from: link.

Terms

terms

Items and Container

items

container

Structure

<div class="container">
	<div class="item">nisim</div>
	<div class="item">shlomo</div>
	<div class="item">david</div>
</div>

.container {
	display: flex;
}

flex-direction

.container {
	display: flex;
	flex-direction: row | column;
}

Direction

flex-wrap

.container {
	display: flex;
	flex-wrap: wrap;
}

Wrap

justify-content

What does “justify” mean?

not that

Justify
The alignment of text to the left/right/both margins.
.container {
	display: flex;
	justify-content: flex-start;
}

justify options

align-items

.container {
	display: flex;
	align-items: stretch;
}

Align Items

align-content

.container {
	display: flex;
	align-content: flex-start;
}

Align Content

gap

.container {
	display: flex;
	gap: 1rem;
}

Different gap between cols and rows:

.container {
	display: flex;
	gap: 10px 20px;
}

Gap