Распространённые макеты Flexbox: навигация, карточки, медиаблоки
Создавайте практичные панели навигации, сетки карточек и медиаблоки с помощью flexbox.
«Распространённые макеты Flexbox: навигация, карточки, медиаблоки» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Значение шаблонов флексбокса
Определённые шаблоны раскладки встречаются практически в каждом веб-проекте. Флексбокс эффективно решает каждую из этих задач с помощью минимального количества CSS. Знание таких шаблонов ускоряет разработку и уменьшает объём кода.
Шаблон панели навигации
Горизонтальная панель навигации с логотипом слева и ссылками справа:
<nav class="navbar">
<span class="logo">Brand</span>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
Центрированный главный экран
Содержимое, центрированное по горизонтали и вертикали и занимающее всю высоту, с помощью флексбокса:
<div class="hero">
<h1>Welcome</h1>
</div>
Сетка карточек
Адаптивная сетка карточек с переносом и равномерными промежутками:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
Медиа-объект
Медиа-объект — это шаблон пользовательского интерфейса с изображением фиксированной ширины и гибким текстом рядом с ним. Он используется в комментариях, публикациях в социальных сетях и элементах списков:
<div class="media">
<img class="media-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="avatar" />
<div class="media-body">
<strong>Jane Doe</strong>
<p>Comment text goes here.</p>
</div>
</div>
Нижний колонтитул с флексбоксом
Переместите нижний колонтитул вниз, не задавая фиксированную высоту:
<main>Main content that grows to fill available space</main>
<footer>Footer</footer>
Кнопка со значком и текстом
Вертикальное центрирование значка и текста в кнопке:
<button class="btn">
<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="currentColor"/></svg>
Download
</button>
Макет «Священный грааль» с флексбоксом
Трёхколоночный макет «Священный грааль» (верхний колонтитул, нижний колонтитул, боковая панель — основное содержимое — боковая панель):
<div class="holy-grail">
<div class="left-sidebar">Left</div>
<div class="main-content">Main</div>
<div class="right-sidebar">Right</div>
</div>
Строка формы с подписями
Выровненные пары подписей и полей ввода в строке формы:
<div class="form-row">
<label>Email</label>
<input type="email" />
</div>
Галерея миниатюр
Галерея изображений с переносом:
<div class="gallery">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23667eea'/><circle cx='150' cy='150' r='100' fill='%23764ba2'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ffd700'/><circle cx='150' cy='150' r='100' fill='%23ff6347'/></svg>" alt="thumb" />
</div>
Список чипов и меток
Чипы и метки с переносом в строке, которые располагаются подобно тексту:
<div class="tags">
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">Layout</span>
</div>
Быстрая проверка
В шаблоне медиа-объекта что предотвращает выход текста за пределы контейнера, если он содержит длинную строку без пробелов?
Повторение
Распространённые шаблоны флексбокса: панель навигации (логотип + автоматический внешний отступ + ссылки), главный экран (столбец + выравнивание по центру), медиа-объект (фиксированное изображение + тело с flex:1 и min-width:0), нижний колонтитул (тело-столбец + основное содержимое с flex:1), сетка карточек (перенос + flex:1 1 Xpx). Эти пять шаблонов покрывают большинство практических задач раскладки.
Часто задаваемые вопросы
Урок «Распространённые макеты Flexbox: навигация, карточки, медиаблоки» бесплатный?
Да — полный текст урока «Распространённые макеты Flexbox: навигация, карточки, медиаблоки» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Распространённые макеты Flexbox: навигация, карточки, медиаблоки»?
Создавайте практичные панели навигации, сетки карточек и медиаблоки с помощью flexbox. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Распространённые макеты Flexbox: навигация, карточки, медиаблоки»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Переопределение выравнивания flex-элемента с align-self
- Свойство order и визуальная перестановка
- Сокращённые записи flex
- Распространённые макеты Flexbox: навигация, карточки, медиаблоки