🧩 Что такое Flexbox?

Flexbox — это способ выстраивать элементы в строку или колонку, выравнивать их по центру, по краям и управлять расстояниями.

Включить Flex:

display: flex;

➡️ Направление элементов

flex-direction: row; — в строку (по умолчанию)
flex-direction: column; — в колонку
flex-direction: row-reverse; — наоборот
flex-direction: column-reverse; — наоборот

🧲 Центрирование по двум осям (САМЫЙ ВАЖНЫЙ ПРИЁМ)

justify-content: center;

align-items: center;

🔁 Перенос строк

flex-wrap: nowrap; — без переноса
flex-wrap: wrap; — перенос
flex-wrap: wrap-reverse; — перенос наоборот

📚 Выравнивание строк (align-content)

Работает только при переносе (flex-wrap: wrap):

align-content: flex-start; — сверху

 align-content: center; — по центру

align-content: flex-end; — снизу

align-content: space-between; — по краям

align-content: space-around; — с отступами

 align-content: stretch; — растянуть

🎯 Выравнивание одного элемента

align-self: flex-start; — отдельно сверху

align-self: center; — отдельно по центру

align-self: flex-end; — отдельно снизу

📦 Управление размерами элементов

flex-grow: 1; — растягивается
flex-shrink: 0; — не сжимается
flex-basis: 100px; — базовый размер

⭐ Короткая запись

flex: 1; — grow + shrink + basis

💡 Совет: если нужно выровнять элемент по центру — почти всегда хватает:

display: flex;

 justify-content: center;

align-items: center;

🧭 Выравнивание во Flexbox

Во Flexbox есть две оси:

Горизонтальная ось (влево ↔ вправо)
Вертикальная ось (вверх ↕ вниз)

Включить Flex:

display: flex;

justify-content: flex-start

justify-content: center

justify-content: space-between

↔️ По горизонтали (justify-content)

justify-content управляет расположением элементов по горизонтали (в строке).

 justify-content: flex-start; — слева

 justify-content: center;— по центру

justify-content: flex-end; — справа

 justify-content: space-between; — по краям

justify-content: space-around; — с отступами

justify-content: space-evenly; — равномерно

↕️ По вертикали (align-items)

align-items управляет расположением элементов по вертикали.

 align-items: flex-start; — сверху

align-items: center; — по центру

align-items: flex-end; — снизу

align-items: stretch; — растянуть (по умолчанию)

align-items: flex-start

align-items: center

align-items: flex-end

🎯 Центрирование по двум осям

justify-content: center + align-items: center

Самый частый приём:

display: flex;

justify-content: center;

align-items: center;

📚 Для нескольких строк

Если элементы переносятся (flex-wrap: wrap), используется align-content:

 align-content: flex-start; — сверху

 align-content: center; — по центру

align-content: flex-end; — снизу

align-content: space-between;

align-content: space-around;

 align-content: stretch;

🎯 Один элемент

Чтобы выровнять один элемент:

 align-self: flex-start;

 align-self: center;

align-self: flex-end;

💡 Запомни:
↔️ justify-content — горизонталь
↕️ align-items — вертикаль

🎮 Flexbox Тренажёр

⬅ пройти бесплатно обучение по-английскому ⬅ Предыдущая Следующая ➡

🎮 Заказать дополнительную игру

Хочешь обучающую игру по своему языку программирования?
(JavaScript, Python, Java, HTML/CSS и др.)

💬 Чат учеников

📘 Учебные тренажёры

🎉 Поздравляем!

Ты успешно завершил тренажёр.
Если ты хочешь получить дополнительные игры-тренажёры, ты можешь поддержать автора донатом.

💛 После доната откроются: Ассемблер, SQL, C++, мини-игры, CSS Animation и адаптивный дизайн (Media Queries).

💛 Поддержать донатом

После пожертвования нажми кнопку ниже