0Pricing
CSS Academy · Урок

Display, Flex и направление Flex

Включайте flexbox у контейнера и управляйте направлением главной оси с помощью flex-direction.

«Display, Flex и направление Flex» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Включение флексбокса

Флексбокс активируется заданием display: flex для элемента-контейнера (флекс-контейнера). Его непосредственные дочерние элементы автоматически становятся флекс-элементами.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

Строчный flex

display: inline-flex создаёт флекс-контейнер, который размещается в строке (как inline-block), а не как блочный элемент. Внутреннее поведение флексбокса остаётся тем же.

<p>Status: <span class="badge">🔥 Trending</span></p>

Главная и поперечная оси

У флексбокса есть две оси:

  • Главная ось: основное направление, в котором размещаются элементы
  • Поперечная ось: перпендикулярна главной оси

Все свойства флексбокса относятся к этим осям, а не к фиксированным направлениям.

flex-direction: row (по умолчанию)

Направление по умолчанию — row: элементы размещаются слева направо вдоль горизонтальной главной оси.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column

flex-direction: column выстраивает элементы вертикально. Главная ось становится вертикальной, а поперечная — горизонтальной.

<div class="sidebar">
    <div>Dashboard</div>
    <div>Reports</div>
    <div>Settings</div>
  </div>

flex-direction: row-reverse

row-reverse меняет горизонтальное направление на противоположное: элементы размещаются справа налево. Начало главной оси находится справа.

<nav class="rtl-nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

flex-direction: column-reverse

column-reverse выстраивает элементы снизу вверх. Последний элемент оказывается вверху.

<div class="chat-list">
    <div>Hey there!</div>
    <div>How are you?</div>
    <div>Doing great, thanks!</div>
  </div>

flex-direction влияет на все свойства флексбокса

При изменении flex-direction направление justify-content также меняется. Если задано направление column, свойство justify-content выравнивает элементы вдоль вертикальной оси, а не горизонтальной.

Простая горизонтальная раскладка

Самый простой вариант использования флексбокса — выравнивание элементов по центру в навигации:

<nav class="nav">
    <div>Logo</div>
    <a href="#">Home</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>

Простая вертикальная раскладка

Вертикальное и горизонтальное выравнивание содержимого карточки по центру:

<div class="card">
    <h3>Welcome</h3>
    <p>Centered content</p>
  </div>

Сокращённая запись flex-flow

flex-flow — сокращённая запись для flex-direction и flex-wrap:

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

Быстрая проверка

Какую ось контролирует justify-content, если задано flex-direction: column?

Итоги

Задайте display: flex для контейнера, чтобы создать флекс-контекст для его дочерних элементов. flex-direction задаёт направление главной оси: row (горизонтальное) или column (вертикальное). Все свойства выравнивания флексбокса определяются относительно этих осей, а не фиксированных направлений «влево/вправо» и «вверх/вниз».

Часто задаваемые вопросы

Урок «Display, Flex и направление Flex» бесплатный?

Да — полный текст урока «Display, Flex и направление Flex» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Display, Flex и направление Flex»?

Включайте flexbox у контейнера и управляйте направлением главной оси с помощью flex-direction. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Display, Flex и направление Flex»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Display, Flex и направление Flex
  2. Justify-Content и Align-Items
  3. Перенос Flex и Align-Content
  4. Рост, сжатие и базовый размер Flex
← Назад к CSS Academy