Урок 24. Задания: Выравнивание: justify-content, align-items, gap

📁 Раздел: Flexbox ⏱️ Время изучения: ~60 мин 🎯 Сложность: Средняя
#align-items #align-content #gap #row-gap #align-self #flex-grow #flex-shrink #flex-basis

⚡ Кратко

Сделайте 4 мини-примера: центрирование по поперечной оси, «выбивающийся» элемент, промежутки через gap и растягивание поля через flex: 1.

Задания

  1. align-items. Контейнер высотой 120px и три блока разной высоты. Выровняйте все блоки по центру поперечной оси.
    Ожидаемый результат: блоки по центру вертикали.
  2. align-self. Возьмите контейнер из задания 1 и прижмите только средний блок к низу, не трогая остальные.
  3. gap. Расставьте между блоками промежуток 20px, не используя margin. Убедитесь, что у краёв контейнера отступа нет.
  4. flex: 1. Соберите строку «иконка — поле ввода — кнопка», где поле занимает всё свободное место, а иконка и кнопка остаются своего размера.
    Поле (зелёное) тянется, иконка и кнопка фиксированы.
  5. Откройте DevTools, включите Flexbox overlay и объясните, где в каждом примере main axis и cross axis.
  6. Самопроверка: какие из использованных свойств стоят на flex-container, а какие — на flex-item?
Готовые решения с живыми превью — на странице «Решения».

Навигация