CSS Academy · Урок

Переопределение выравнивания flex-элемента с align-self

Переопределяйте align-items контейнера для отдельных flex-элементов с помощью align-self.

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

Что такое align-self?

align-self переопределяет настройку align-items флекс-контейнера для отдельного флекс-элемента. Это свойство применяется к отдельным элементам, а не к контейнеру.

Значения align-self

Принимает те же значения, что и align-items:

auto — наследует значение align-items контейнера (по умолчанию)
flex-start — выравнивает по началу поперечной оси
flex-end — выравнивает по концу поперечной оси
center — центрирует по поперечной оси
stretch — растягивает до заполнения размера поперечной оси
baseline — выравнивает по базовым линиям текста

Практический пример

Навигация, в которой большинство элементов выровнено по центру, а последняя кнопка — по краю:

<nav class="nav">
  <span>Logo</span>
  <a href="#">Link</a>
  <button class="cta-button">Sign Up</button>
</nav>

Растягивание одного элемента

Растяните одну карточку на всю высоту, тогда как остальные будут занимать только необходимое им пространство:

<div class="sidebar-layout">
  <div>Content</div>
  <div class="ad-unit">Ad</div>
</div>

margin: auto для выравнивания

Автоматические внешние отступы у флекс-элементов перемещают сами элементы или их соседей к противоположной стороне. Это мощная альтернатива align-self для центрирования или распределения пространства.

<nav class="nav">
  <span class="logo">Logo</span>
  <a href="#">Home</a>
  <a href="#">About</a>
  <span class="settings">&#9881;</span>
</nav>

margin: auto для вертикального центрирования

Автоматические отступы работают и по вертикали. margin-top: auto внутри флекс-контейнера с направлением столбца перемещает элемент вниз:

<div class="card">
  <p>Card body</p>
  <div class="card-footer">Footer</div>
</div>

Выравнивание по базовой линии

Выравнивание элементов по базовой линии текста сохраняет понятную связь между элементами разных размеров:

<div class="stats-row">
  <span class="big-number">42</span>
  <span class="label">users</span>
</div>

align-self: auto (по умолчанию)

align-self: auto указывает элементу использовать значение align-items контейнера. Задавать align-self нужно только тогда, когда требуется отклониться от значения контейнера по умолчанию.

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

Помните: align-self всегда работает с поперечной осью. Если задано flex-direction: column, поперечная ось является горизонтальной, поэтому align-self управляет расположением слева и справа.

Объединение align-self с flex-grow

Распространённый приём: растянуть элемент, чтобы заполнить пространство, AND переопределить его выравнивание по поперечной оси:

<div class="features">
  <div class="feature-card">Feature A</div>
  <div>Feature B</div>
</div>

Выравнивание в CSS-сетке и флексбоксе

В CSS-сетке есть и align-self (для оси строк), и justify-self (для оси столбцов), что позволяет управлять расположением в двух измерениях. Свойство align-self во флексбоксе управляет только поперечной осью — для главной оси используйте margin: auto.

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

У флекс-контейнера задано align-items: center. Один элемент нужно выровнять по верхнему краю поперечной оси. Какое свойство следует задать этому элементу?

Итоги

align-self переопределяет значение align-items флекс-контейнера для отдельных элементов. Используйте его, чтобы изменить схему выравнивания для конкретных элементов. margin: auto — дополнительный инструмент, который распределяет оставшееся пространство и перемещает элементы вдоль любой оси.

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

Урок «Переопределение выравнивания flex-элемента с align-self» бесплатный?

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

Чему я научусь в уроке «Переопределение выравнивания flex-элемента с align-self»?

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

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

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

Сколько времени занимает урок «Переопределение выравнивания flex-элемента с align-self»?

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

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

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

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

Переопределение выравнивания flex-элемента с align-self
Свойство order и визуальная перестановка
Сокращённые записи flex
Распространённые макеты Flexbox: навигация, карточки, медиаблоки

← Назад к CSS Academy