Flexbox CSS: шпаргалка по свойствам с примерами

ДБ

Дмитрий Борисенко

1 августа 2026 года · 5 минут чтения

Flexbox (Flexible Box Layout) — одномерный способ раскладки. Он распределяет свободное место между элементами и выравнивает их внутри контейнера. На нём верстают компоненты, навигационные панели и всё, что должно подстраиваться под ширину.

Шпаргалка: все свойства Flexbox в одной таблице

Если нужно быстро вспомнить конкретное свойство, вот все они на одном экране. Подробный разбор каждого с примерами идёт ниже по статье.

Свойства флекс-контейнера задаются на родителе с display: flex:

Свойство	Значения	Что делает
`flex-direction`	`row` (по умолчанию), `row-reverse`, `column`, `column-reverse`	направление главной оси
`flex-wrap`	`nowrap` (по умолчанию), `wrap`, `wrap-reverse`	переносить ли элементы на новую строку
`justify-content`	`flex-start` (по умолчанию), `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`	выравнивание по главной оси
`align-items`	`stretch` (по умолчанию), `flex-start`, `flex-end`, `center`, `baseline`	выравнивание по поперечной оси
`align-content`	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `stretch` (по умолчанию)	выравнивание нескольких строк при `flex-wrap: wrap`
`gap`	любая длина, напр. `1rem`	расстояние между элементами

Свойства флекс-элемента задаются на дочерних элементах:

Свойство	Значения	Что делает
`flex-grow`	число, `0` по умолчанию	насколько элемент растёт, если есть свободное место
`flex-shrink`	число, `1` по умолчанию	насколько элемент сжимается, если места не хватает
`flex-basis`	длина или `auto` (по умолчанию)	стартовый размер элемента до распределения свободного места
`flex`	сокращение — `grow shrink basis`	`flex: 1` = `1 1 0`, `flex: auto` = `1 1 auto`
`align-self`	`auto` (по умолчанию), `flex-start`, `flex-end`, `center`, `baseline`, `stretch`	переопределяет `align-items` для одного элемента
`order`	число, `0` по умолчанию	визуальный порядок (не влияет на DOM и Tab-навигацию)

Держать всё это в голове необязательно. Соберите раскладку визуально в генераторе Flexbox и заберите готовый CSS.

Основы флекс-контейнера

Чтобы создать флекс-контейнер, задайте display: flex:

.container {
	display: flex;
	/* or display: inline-flex; for inline containers */
}

Основная и поперечная ось

Пока не разберётесь с осями, Flexbox будет казаться непредсказуемым:

.container {
	display: flex;
	flex-direction: row; /* Main axis: horizontal, Cross axis: vertical */
	/* Other values: row-reverse, column, column-reverse */
}

Свойства флекс-контейнера

1. justify-content (выравнивание по основной оси)

.container {
	display: flex;
	justify-content: flex-start; /* Default */
	/* Other values: flex-end, center, space-between, space-around, space-evenly */
}

/* Practical example: Navigation */
.nav {
	display: flex;
	justify-content: space-between;
	padding: 1rem;
	background: #2c3e50;
}

.nav-logo {
	font-weight: bold;
	color: white;
}

.nav-links {
	display: flex;
	gap: 2rem;
	list-style: none;
}

2. align-items (выравнивание по поперечной оси)

.container {
	display: flex;
	align-items: stretch; /* Default */
	/* Other values: flex-start, flex-end, center, baseline */
}

/* Practical example: Card with icon */
.card {
	display: flex;
	align-items: center;
	padding: 1rem;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-icon {
	width: 48px;
	height: 48px;
	margin-right: 1rem;
}

3. flex-wrap

.container {
	display: flex;
	flex-wrap: nowrap; /* Default */
	/* Other values: wrap, wrap-reverse */
}

/* Practical example: Tag list */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tag {
	padding: 0.25rem 0.75rem;
	background: #3498db;
	color: white;
	border-radius: 20px;
	font-size: 0.875rem;
}

4. align-content (поперечное выравнивание нескольких строк)

.container {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	/* Other values: flex-end, center, space-between, space-around, stretch */
	height: 300px;
}

5. gap (расстояние между элементами)

.container {
	display: flex;
	gap: 20px; /* Both row and column gap */
	/* Or separately: row-gap: 10px; column-gap: 20px; */
}

Свойства флекс-элементов

1. flex-grow, flex-shrink, flex-basis

Три свойства управляют тем, как элемент делит место:

.item {
	flex-grow: 0; /* насколько растёт, если место осталось */
	flex-shrink: 1; /* насколько сжимается, если места не хватает */
	flex-basis: auto; /* с какого размера начинает */
}

Это значения по умолчанию, в короткой записи flex: 0 1 auto. Элемент не растёт, но сжимается, а стартует от размера своего содержимого.

flex: 1 или flex: auto — в чём разница

Вот вопрос, ради которого сюда чаще всего и приходят: «почему мои колонки получились разной ширины?» Ответ прячется в flex-basis.

/* Колонки строго одинаковые, что бы в них ни лежало */
.item {
	flex: 1;
} /* = flex: 1 1 0   — basis НОЛЬ */

/* Колонки стартуют от содержимого, делится только остаток */
.item {
	flex: auto;
} /* = flex: 1 1 auto — basis AUTO */

flex: 1 обнуляет базовый размер: браузер считает, что элементы занимают ноль, и делит между ними всё место поровну. Колонки выходят равными, даже если в одной слово, а в другой абзац.

flex: auto оставляет базовым размером содержимое: сначала каждый элемент берёт своё, и только остаток делится поровну. Колонка с длинным текстом окажется шире.

Главная ловушка в том, что flex: <число> всегда обнуляет basis. Пишете flex: 1 и молча получаете flex-basis: 0, а не auto.

И ещё одно. flex-basis работает по главной оси. При flex-direction: column это высота, а не ширина.

/* Practical example: Sidebar layout */
.layout {
	display: flex;
	gap: 2rem;
	min-height: 100dvh;
}

.sidebar {
	flex: 0 0 250px; /* Don't grow or shrink, fixed 250px */
	background: #ecf0f1;
	padding: 1rem;
}

.main-content {
	flex: 1; /* Take remaining space */
	padding: 1rem;
}

2. align-self (индивидуальное выравнивание по поперечной оси)

.item {
	align-self: auto; /* Default - uses align-items value */
	/* Other values: flex-start, flex-end, center, baseline, stretch */
}

/* Practical example: Hero section */
.hero {
	display: flex;
	align-items: center;
	min-height: 400px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-content {
	flex: 1;
	padding: 2rem;
	color: white;
}

.hero-image {
	flex: 1;
	align-self: stretch;
	object-fit: cover;
}

3. order (визуальный порядок)

Об этом обычно молчат: order меняет только картинку. Порядок в DOM остаётся прежним, а значит прежним остаётся и порядок обхода по Tab, и порядок чтения скринридером.

Человек с клавиатурой увидит, как фокус хаотично прыгает по экрану. Визуально элементы идут слева направо, а фокус — в исходном порядке разметки. То же касается row-reverse и column-reverse.

Вывод простой. order годится для декоративной перестановки, но если порядок важен по смыслу, меняйте разметку, а не CSS.

.item {
	order: 0; /* по умолчанию */
	/* отрицательные значения идут первыми, положительные — последними */
}

/* Practical example: Mobile-first layout */
.article {
	display: flex;
	flex-direction: column;
}

.article-content {
	order: 2;
}
.article-sidebar {
	order: 1;
}
.article-related {
	order: 3;
}

@media (min-width: 768px) {
	.article {
		flex-direction: row;
	}

	.article-content {
		order: 1;
		flex: 2;
	}
	.article-sidebar {
		order: 2;
		flex: 1;
	}
	.article-related {
		order: 3;
		flex: 1;
	}
}

Распространённые паттерны Flexbox

1. Центрирование содержимого

/* Perfect centering */
.center-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100dvh;
}

/* Horizontal centering only */
.h-center {
	display: flex;
	justify-content: center;
}

/* Vertical centering only */
.v-center {
	display: flex;
	align-items: center;
}

2. Колонки одинаковой высоты

.columns {
	display: flex;
	gap: 2rem;
}

.column {
	flex: 1;
	padding: 1.5rem;
	background: #f8f9fa;
	border-radius: 8px;
	/* All columns will have equal height automatically */
}

3. Прижатый к низу футер

body {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	margin: 0;
}

main {
	flex: 1; /* Takes all available space */
}

footer {
	background: #2c3e50;
	color: white;
	padding: 2rem;
	/* Always sticks to bottom */
}

4. Медиа-объект

.media {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.media-image {
	flex-shrink: 0;
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 8px;
}

.media-content {
	flex: 1;
}

5. Адаптивная навигация

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
	background: #2c3e50;
}

.nav-menu {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-item a {
	color: white;
	text-decoration: none;
	transition: opacity 0.3s;
}

.nav-item a:hover {
	opacity: 0.8;
}

/* Mobile menu */
@media (max-width: 768px) {
	.nav-menu {
		position: fixed;
		left: -100%;
		top: 70px;
		flex-direction: column;
		background-color: #2c3e50;
		width: 100%;
		text-align: center;
		transition: 0.3s;
		padding: 2rem 0;
	}

	.nav-menu.active {
		left: 0;
	}
}

6. Сетка карточек на Flexbox

.card-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: 2rem;
}

.card {
	flex: 1 1 300px; /* базовый размер 300px — это НЕ минимум: элемент сожмётся */
	display: flex;
	flex-direction: column;
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s;
}

.card:hover {
	transform: translateY(-4px);
}

.card-image {
	height: 200px;
	object-fit: cover;
}

.card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
}

.card-title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.card-description {
	flex: 1;
	color: #666;
	line-height: 1.6;
}

.card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #eee;
}

Flexbox или Grid

Используйте Flexbox, когда:

работаете с одномерными раскладками;
размер содержимого должен определять раскладку;
нужно выравнивание и распределение пространства;
строите навигационные панели, тулбары или небольшие компоненты.

Используйте Grid, когда:

работаете с двумерными раскладками;
нужен точный контроль над строками и колонками;
строите крупные макеты страниц;
хотите накладывать элементы друг на друга.

Раскладку на Grid тоже можно собрать визуально, в генераторе CSS Grid.

Почему флекс-элемент не сжимается

Классическая ситуация. Во флекс-контейнере лежит блок с длинным текстом, он вылезает за края и разносит всю раскладку.

Причина неочевидна. У флекс-элемента по умолчанию min-width: auto, то есть уже своего содержимого он стать не может. Длинное слово, неразрывная строка или блок с overflow: hidden внутри — и элемент упирается, а контейнер растягивается следом.

/* Лечение: разрешаем элементу сжиматься */
.item {
	min-width: 0;
}

/* Для колонки — то же самое по вертикали */
.item {
	min-height: 0;
}

Это ответ на большинство вопросов вида «почему у меня flexbox уехал».

Поддержка браузерами

Flexbox работает везде с 2015 года. Вендорные префиксы (-webkit-box, -ms-flexbox) относятся к IE10 и Safari 6, писать их руками в 2026-м не нужно, а если бы и было нужно, это работа Autoprefixer, а не ваша.

Свойств здесь десяток, и половина задач решается связкой display: flex, gap и flex: 1. Остальное подсматривайте в таблице выше, когда понадобится.

CSS Flexbox генератор

Визуальный генератор CSS Flexbox: расположите и выровняйте элементы, скопируйте готовый код CSS или Tailwind.

Попробовать

Flexbox CSS: шпаргалка по свойствам с примерами

ДБ

Дмитрий Борисенко

1 августа 2026 года · 5 минут чтения

Шпаргалка: все свойства Flexbox в одной таблице

Свойства флекс-контейнера задаются на родителе с display: flex:

Свойство	Значения	Что делает
`flex-direction`	`row` (по умолчанию), `row-reverse`, `column`, `column-reverse`	направление главной оси
`flex-wrap`	`nowrap` (по умолчанию), `wrap`, `wrap-reverse`	переносить ли элементы на новую строку
`justify-content`	`flex-start` (по умолчанию), `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`	выравнивание по главной оси
`align-items`	`stretch` (по умолчанию), `flex-start`, `flex-end`, `center`, `baseline`	выравнивание по поперечной оси
`align-content`	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `stretch` (по умолчанию)	выравнивание нескольких строк при `flex-wrap: wrap`
`gap`	любая длина, напр. `1rem`	расстояние между элементами

Свойства флекс-элемента задаются на дочерних элементах:

Свойство	Значения	Что делает
`flex-grow`	число, `0` по умолчанию	насколько элемент растёт, если есть свободное место
`flex-shrink`	число, `1` по умолчанию	насколько элемент сжимается, если места не хватает
`flex-basis`	длина или `auto` (по умолчанию)	стартовый размер элемента до распределения свободного места
`flex`	сокращение — `grow shrink basis`	`flex: 1` = `1 1 0`, `flex: auto` = `1 1 auto`
`align-self`	`auto` (по умолчанию), `flex-start`, `flex-end`, `center`, `baseline`, `stretch`	переопределяет `align-items` для одного элемента
`order`	число, `0` по умолчанию	визуальный порядок (не влияет на DOM и Tab-навигацию)

Держать всё это в голове необязательно. Соберите раскладку визуально в генераторе Flexbox и заберите готовый CSS.

Основы флекс-контейнера

Чтобы создать флекс-контейнер, задайте display: flex:

.container {
	display: flex;
	/* or display: inline-flex; for inline containers */
}

Основная и поперечная ось

Пока не разберётесь с осями, Flexbox будет казаться непредсказуемым:

.container {
	display: flex;
	flex-direction: row; /* Main axis: horizontal, Cross axis: vertical */
	/* Other values: row-reverse, column, column-reverse */
}

Свойства флекс-контейнера

1. justify-content (выравнивание по основной оси)

.container {
	display: flex;
	justify-content: flex-start; /* Default */
	/* Other values: flex-end, center, space-between, space-around, space-evenly */
}

/* Practical example: Navigation */
.nav {
	display: flex;
	justify-content: space-between;
	padding: 1rem;
	background: #2c3e50;
}

.nav-logo {
	font-weight: bold;
	color: white;
}

.nav-links {
	display: flex;
	gap: 2rem;
	list-style: none;
}

2. align-items (выравнивание по поперечной оси)

.container {
	display: flex;
	align-items: stretch; /* Default */
	/* Other values: flex-start, flex-end, center, baseline */
}

/* Practical example: Card with icon */
.card {
	display: flex;
	align-items: center;
	padding: 1rem;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-icon {
	width: 48px;
	height: 48px;
	margin-right: 1rem;
}

3. flex-wrap

.container {
	display: flex;
	flex-wrap: nowrap; /* Default */
	/* Other values: wrap, wrap-reverse */
}

/* Practical example: Tag list */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tag {
	padding: 0.25rem 0.75rem;
	background: #3498db;
	color: white;
	border-radius: 20px;
	font-size: 0.875rem;
}

4. align-content (поперечное выравнивание нескольких строк)

.container {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	/* Other values: flex-end, center, space-between, space-around, stretch */
	height: 300px;
}

5. gap (расстояние между элементами)

.container {
	display: flex;
	gap: 20px; /* Both row and column gap */
	/* Or separately: row-gap: 10px; column-gap: 20px; */
}

Свойства флекс-элементов

1. flex-grow, flex-shrink, flex-basis

Три свойства управляют тем, как элемент делит место:

.item {
	flex-grow: 0; /* насколько растёт, если место осталось */
	flex-shrink: 1; /* насколько сжимается, если места не хватает */
	flex-basis: auto; /* с какого размера начинает */
}

flex: 1 или flex: auto — в чём разница

/* Колонки строго одинаковые, что бы в них ни лежало */
.item {
	flex: 1;
} /* = flex: 1 1 0   — basis НОЛЬ */

/* Колонки стартуют от содержимого, делится только остаток */
.item {
	flex: auto;
} /* = flex: 1 1 auto — basis AUTO */

Главная ловушка в том, что flex: <число> всегда обнуляет basis. Пишете flex: 1 и молча получаете flex-basis: 0, а не auto.

И ещё одно. flex-basis работает по главной оси. При flex-direction: column это высота, а не ширина.

/* Practical example: Sidebar layout */
.layout {
	display: flex;
	gap: 2rem;
	min-height: 100dvh;
}

.sidebar {
	flex: 0 0 250px; /* Don't grow or shrink, fixed 250px */
	background: #ecf0f1;
	padding: 1rem;
}

.main-content {
	flex: 1; /* Take remaining space */
	padding: 1rem;
}

2. align-self (индивидуальное выравнивание по поперечной оси)

.item {
	align-self: auto; /* Default - uses align-items value */
	/* Other values: flex-start, flex-end, center, baseline, stretch */
}

/* Practical example: Hero section */
.hero {
	display: flex;
	align-items: center;
	min-height: 400px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-content {
	flex: 1;
	padding: 2rem;
	color: white;
}

.hero-image {
	flex: 1;
	align-self: stretch;
	object-fit: cover;
}

3. order (визуальный порядок)

.item {
	order: 0; /* по умолчанию */
	/* отрицательные значения идут первыми, положительные — последними */
}

/* Practical example: Mobile-first layout */
.article {
	display: flex;
	flex-direction: column;
}

.article-content {
	order: 2;
}
.article-sidebar {
	order: 1;
}
.article-related {
	order: 3;
}

@media (min-width: 768px) {
	.article {
		flex-direction: row;
	}

	.article-content {
		order: 1;
		flex: 2;
	}
	.article-sidebar {
		order: 2;
		flex: 1;
	}
	.article-related {
		order: 3;
		flex: 1;
	}
}

Распространённые паттерны Flexbox

1. Центрирование содержимого

/* Perfect centering */
.center-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100dvh;
}

/* Horizontal centering only */
.h-center {
	display: flex;
	justify-content: center;
}

/* Vertical centering only */
.v-center {
	display: flex;
	align-items: center;
}

2. Колонки одинаковой высоты

.columns {
	display: flex;
	gap: 2rem;
}

.column {
	flex: 1;
	padding: 1.5rem;
	background: #f8f9fa;
	border-radius: 8px;
	/* All columns will have equal height automatically */
}

3. Прижатый к низу футер

body {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	margin: 0;
}

main {
	flex: 1; /* Takes all available space */
}

footer {
	background: #2c3e50;
	color: white;
	padding: 2rem;
	/* Always sticks to bottom */
}

4. Медиа-объект

.media {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.media-image {
	flex-shrink: 0;
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 8px;
}

.media-content {
	flex: 1;
}

5. Адаптивная навигация

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
	background: #2c3e50;
}

.nav-menu {
	display: flex;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-item a {
	color: white;
	text-decoration: none;
	transition: opacity 0.3s;
}

.nav-item a:hover {
	opacity: 0.8;
}

/* Mobile menu */
@media (max-width: 768px) {
	.nav-menu {
		position: fixed;
		left: -100%;
		top: 70px;
		flex-direction: column;
		background-color: #2c3e50;
		width: 100%;
		text-align: center;
		transition: 0.3s;
		padding: 2rem 0;
	}

	.nav-menu.active {
		left: 0;
	}
}

6. Сетка карточек на Flexbox

.card-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: 2rem;
}

.card {
	flex: 1 1 300px; /* базовый размер 300px — это НЕ минимум: элемент сожмётся */
	display: flex;
	flex-direction: column;
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s;
}

.card:hover {
	transform: translateY(-4px);
}

.card-image {
	height: 200px;
	object-fit: cover;
}

.card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
}

.card-title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.card-description {
	flex: 1;
	color: #666;
	line-height: 1.6;
}

.card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #eee;
}

Flexbox или Grid

Используйте Flexbox, когда:

работаете с одномерными раскладками;
размер содержимого должен определять раскладку;
нужно выравнивание и распределение пространства;
строите навигационные панели, тулбары или небольшие компоненты.

Используйте Grid, когда:

работаете с двумерными раскладками;
нужен точный контроль над строками и колонками;
строите крупные макеты страниц;
хотите накладывать элементы друг на друга.

Раскладку на Grid тоже можно собрать визуально, в генераторе CSS Grid.

Почему флекс-элемент не сжимается

/* Лечение: разрешаем элементу сжиматься */
.item {
	min-width: 0;
}

/* Для колонки — то же самое по вертикали */
.item {
	min-height: 0;
}

Это ответ на большинство вопросов вида «почему у меня flexbox уехал».

Поддержка браузерами

CSS Flexbox генератор

Визуальный генератор CSS Flexbox: расположите и выровняйте элементы, скопируйте готовый код CSS или Tailwind.

Попробовать

Flexbox CSS: шпаргалка по свойствам с примерами

Шпаргалка: все свойства Flexbox в одной таблице

Основы флекс-контейнера

Основная и поперечная ось

Свойства флекс-контейнера

1. justify-content (выравнивание по основной оси)

2. align-items (выравнивание по поперечной оси)

3. flex-wrap

4. align-content (поперечное выравнивание нескольких строк)

5. gap (расстояние между элементами)

Свойства флекс-элементов

1. flex-grow, flex-shrink, flex-basis

flex: 1 или flex: auto — в чём разница

2. align-self (индивидуальное выравнивание по поперечной оси)

3. order (визуальный порядок)

Распространённые паттерны Flexbox

1. Центрирование содержимого

2. Колонки одинаковой высоты

3. Прижатый к низу футер

4. Медиа-объект

5. Адаптивная навигация

6. Сетка карточек на Flexbox

Flexbox или Grid

Почему флекс-элемент не сжимается

Поддержка браузерами

CSS Flexbox генератор

Читайте также

CSS Grid Layout: полное руководство с примерами

CSS Container Queries: будущее адаптивных компонентов

Руководство по CSS clamp(): адаптив без медиа-запросов

Flexbox CSS: шпаргалка по свойствам с примерами

Шпаргалка: все свойства Flexbox в одной таблице

Основы флекс-контейнера

Основная и поперечная ось

Свойства флекс-контейнера

1. justify-content (выравнивание по основной оси)

2. align-items (выравнивание по поперечной оси)

3. flex-wrap

4. align-content (поперечное выравнивание нескольких строк)

5. gap (расстояние между элементами)

Свойства флекс-элементов

1. flex-grow, flex-shrink, flex-basis

flex: 1 или flex: auto — в чём разница

2. align-self (индивидуальное выравнивание по поперечной оси)

3. order (визуальный порядок)

Распространённые паттерны Flexbox

1. Центрирование содержимого

2. Колонки одинаковой высоты

3. Прижатый к низу футер

4. Медиа-объект

5. Адаптивная навигация

6. Сетка карточек на Flexbox

Flexbox или Grid

Почему флекс-элемент не сжимается

Поддержка браузерами

CSS Flexbox генератор

Читайте также

CSS Grid Layout: полное руководство с примерами

CSS Container Queries: будущее адаптивных компонентов

Руководство по CSS clamp(): адаптив без медиа-запросов