Получить профессию в Skypro
CSS Flexbox: создание адаптивных сайтов без головной боли
Для кого эта статья:
- начинающие веб-разработчики
- веб-дизайнеры, желающие освоить адаптивную верстку
студенты и участники курсов по программированию и веб-разработке
Верстка сайтов уже не та, что раньше! Забудьте о плавающих элементах и позиционировании, приводящих к головной боли. CSS Flexbox полностью изменил правила игры, позволяя создавать сложные адаптивные макеты буквально в несколько строк кода. В этом руководстве я проведу вас через каждый этап создания полноценного сайта на флексбоксах — от базовой структуры до финальных штрихов. Готовы превратиться из верстальщика-любителя в профессионала гибкой верстки? 🚀
Хотите освоить CSS Flexbox на профессиональном уровне? Наш курс Обучение веб-разработке от Skypro включает не только теоретические основы, но и практические проекты с индивидуальной обратной связью от опытных разработчиков. Вы создадите более 10 адаптивных сайтов с нуля и получите портфолио, которое впечатлит любого работодателя. Старт новой группы уже скоро — забронируйте место сейчас!
Основы CSS Flexbox для создания современного сайта
CSS Flexbox — это модуль макета, который позволяет эффективно размещать элементы в контейнере даже при неизвестных размерах. Благодаря нему можно автоматически перераспределять пространство, выравнивать элементы и менять их порядок без внесения изменений в HTML-структуру.
Прежде чем мы приступим к созданию сайта, разберемся с основными концепциями:
- Flex-контейнер — родительский элемент, которому мы задаем свойство
display: flex. - Flex-элементы — дочерние элементы, которые автоматически становятся гибкими.
- Главная ось — основное направление (по умолчанию горизонтальное).
- Поперечная ось — перпендикулярна главной оси.
Ключевые свойства для flex-контейнера:
| Свойство | Что делает | Частота использования |
|---|---|---|
| display: flex | Определяет flex-контейнер | 100% проектов с Flexbox |
| flex-direction | Устанавливает главную ось | 85% проектов |
| justify-content | Выравнивание по главной оси | 95% проектов |
| align-items | Выравнивание по поперечной оси | 90% проектов |
| flex-wrap | Управляет переносом элементов | 75% проектов |
Алексей Морозов, технический директор
Когда я начинал работать над редизайном корпоративного портала для крупного банка, верстка занимала до 40% общего времени проекта. Клиент требовал идеального отображения на десятках устройств — от смартфонов до огромных мониторов в операционных залах. Первый прототип я сверстал традиционными методами, и результат был... скажем так, неубедительным. Мы теряли время на отладку странных багов с отступами и "плавающими" блоками.
Решение пришло, когда я полностью переписал вёрстку на Flexbox. Время разработки сократилось вдвое, а количество багов уменьшилось на 80%. Клиент был в восторге от плавности адаптации интерфейса под разные устройства. С тех пор я не представляю современной верстки без флексбоксов — это как пересесть с велосипеда на спорткар.
Для flex-элементов важны такие свойства:
- flex-grow — способность элемента расширяться (по умолчанию 0).
- flex-shrink — способность элемента сжиматься (по умолчанию 1).
- flex-basis — начальный размер элемента.
- flex — сокращенная запись для трех предыдущих свойств.
- order — позволяет изменять порядок элементов без изменения HTML.
Теперь, вооружившись этими знаниями, мы готовы приступить к созданию настоящего сайта. 🛠️
Настройка базовой структуры сайта с Flexbox-контейнерами
Давайте начнем с настройки базовой структуры нашего сайта. Для начала создадим основные HTML-файлы и папки:
- index.html — главная страница
- styles/main.css — основные стили
- images/ — папка для изображений
Вот базовая HTML-разметка, с которой мы начнем:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мой Flexbox сайт</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<header class="header">
<div class="container header__container">
<div class="logo">FlexMaster</div>
<nav class="navigation">
<ul class="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<div class="container hero__container">
<h1>Создаем сайт с CSS Flexbox</h1>
<p>Современные подходы к верстке</p>
<button class="button">Узнать больше</button>
</div>
</section>
<section class="features">
<div class="container features__container">
<!-- Здесь будет содержимое раздела -->
</div>
</section>
<section class="content">
<div class="container content__container">
<!-- Здесь будет содержимое раздела -->
</div>
</section>
</main>
<footer class="footer">
<div class="container footer__container">
<!-- Здесь будет содержимое футера -->
</div>
</footer>
</body>
</html>
Теперь настроим базовые CSS-стили с Flexbox для всего сайта:
/* Сброс стилей и базовые настройки */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
}
/* Общий контейнер для всех секций */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Настройка базовой flex-структуры */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1; /* Занимает все доступное пространство */
}
/* Общие стили для секций */
section {
padding: 60px 0;
}
Заметьте, что мы применили display: flex к элементу body, установив направление flex-direction: column. Это позволяет нам:
- Растянуть сайт на всю высоту экрана
- Легко прикрепить футер к нижней части страницы
- Обеспечить корректное распределение пространства между секциями
Пришло время организовать более сложную структуру наших секций. Давайте модифицируем раздел features, чтобы он содержал три колонки:
<section class="features">
<div class="container">
<h2 class="section-title">Наши преимущества</h2>
<div class="features__container">
<div class="feature-card">
<div class="feature-icon">🚀</div>
<h3>Быстрая разработка</h3>
<p>Flexbox ускоряет процесс верстки в несколько раз.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📱</div>
<h3>Адаптивность</h3>
<p>Ваш сайт будет отлично выглядеть на любом устройстве.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🧩</div>
<h3>Простота поддержки</h3>
<p>Внесение изменений в макет не требует переписывания кода.</p>
</div>
</div>
</div>
</section>
Теперь добавим CSS для этого раздела:
.section-title {
text-align: center;
margin-bottom: 40px;
}
.features__container {
display: flex;
justify-content: space-between;
gap: 20px;
}
.feature-card {
flex: 1;
padding: 25px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.feature-icon {
font-size: 48px;
margin-bottom: 20px;
}
Обратите внимание на гибкость, которую дает нам Flexbox — колонки автоматически делят пространство благодаря flex: 1 у каждой карточки. 🎯
Разработка адаптивного хедера и навигации на флексбоксах
Хедер сайта — это первое, что видят пользователи, поэтому он должен быть не только привлекательным, но и функциональным на любых устройствах. С помощью Flexbox мы создадим адаптивный хедер, который легко трансформируется от десктопной версии к мобильной.
Вернемся к нашей HTML-структуре хедера:
<header class="header">
<div class="container header__container">
<div class="logo">FlexMaster</div>
<nav class="navigation">
<ul class="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
<button class="mobile-menu-btn">☰</button>
</div>
</header>
Я добавил кнопку мобильного меню, которая будет отображаться только на маленьких экранах.
Теперь добавим CSS для стилизации хедера:
.header {
background-color: #2c3e50;
color: white;
padding: 15px 0;
position: sticky;
top: 0;
z-index: 100;
}
.header__container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.menu {
display: flex;
list-style: none;
gap: 20px;
}
.menu a {
color: white;
text-decoration: none;
padding: 5px 10px;
transition: background-color 0.3s;
}
.menu a:hover {
background-color: #3498db;
border-radius: 4px;
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
}
/* Медиа-запрос для адаптивности */
@media (max-width: 768px) {
.menu {
display: none; /* Скрываем меню на мобильных устройствах */
position: absolute;
top: 60px;
left: 0;
right: 0;
background-color: #2c3e50;
flex-direction: column;
padding: 20px;
}
.menu.active {
display: flex; /* Показываем меню при активации */
}
.mobile-menu-btn {
display: block;
}
}
Для полной функциональности мобильного меню нам понадобится немного JavaScript:
document.querySelector('.mobile-menu-btn').addEventListener('click', function() {
document.querySelector('.menu').classList.toggle('active');
});
Давайте проанализируем, какие преимущества дает Flexbox в разработке хедера:
| Аспект дизайна | Традиционный CSS | С использованием Flexbox |
|---|---|---|
| Центрирование элементов по вертикали | Требует сложных расчетов или хаков | Решается одной строкой: align-items: center |
| Расстояние между пунктами меню | Margin/padding с возможными побочными эффектами | Свойство gap равномерно распределяет пространство |
| Переход к мобильной версии | Требует переписывания большой части CSS | Достаточно изменить flex-direction: column |
| Распределение пространства | Сложные расчеты с процентами или float | justify-content автоматически распределяет пространство |
Мария Соколова, фриланс-разработчик
Один из моих первых клиентов заказал сайт для своей кофейни. Бюджет был маленький, а сроки сжатые — всего 3 дня на разработку. Что еще хуже, заказчик хотел, чтобы сайт одинаково хорошо работал как на компьютерах посетителей, так и в информационном киоске в самой кофейне, а также на телефонах.
Я решила полностью построить вёрстку на флексбоксах. Хедер был особенно сложной задачей — на десктопе логотип должен был находиться по центру меню, а на мобильных — сверху. В киоске же требовалась вертикальная ориентация с крупными кнопками.
Благодаря CSS Flexbox я создала один адаптивный хедер, который трансформировался под все эти требования с помощью всего нескольких медиа-запросов. Когда клиент увидел, как сайт плавно адаптируется к разным экранам, он был в восторге и порекомендовал меня трем своим знакомым бизнесменам.
Создание многоколоночного контента с помощью CSS Flexbox
Многоколоночный контент — важная часть большинства современных сайтов. Flexbox делает создание таких макетов значительно проще традиционных методов. Давайте реализуем содержательный раздел с разным количеством колонок.
Добавим разметку для нашего раздела контента:
<section class="content">
<div class="container">
<h2 class="section-title">Наши услуги</h2>
<div class="content__container">
<div class="content__main">
<article class="service-card">
<img src="images/service1.jpg" alt="Разработка сайтов">
<h3>Разработка сайтов</h3>
<p>Создаем современные адаптивные сайты с использованием передовых технологий.</p>
<a href="#" class="button button--small">Подробнее</a>
</article>
<article class="service-card">
<img src="images/service2.jpg" alt="Дизайн интерфейсов">
<h3>Дизайн интерфейсов</h3>
<p>Разрабатываем удобные и интуитивно понятные интерфейсы для любых задач.</p>
<a href="#" class="button button--small">Подробнее</a>
</article>
<article class="service-card">
<img src="images/service3.jpg" alt="SEO-оптимизация">
<h3>SEO-оптимизация</h3>
<p>Повышаем видимость вашего сайта в поисковых системах и привлекаем целевой трафик.</p>
<a href="#" class="button button--small">Подробнее</a>
</article>
</div>
<aside class="sidebar">
<div class="sidebar__widget">
<h3>Последние новости</h3>
<ul>
<li><a href="#">Запустили новый проект</a></li>
<li><a href="#">Обновление технологий</a></li>
<li><a href="#">Участие в конференции</a></li>
</ul>
</div>
<div class="sidebar__widget">
<h3>Свяжитесь с нами</h3>
<form class="contact-form">
<input type="email" placeholder="Ваш email">
<textarea placeholder="Сообщение"></textarea>
<button type="submit" class="button">Отправить</button>
</form>
</div>
</aside>
</div>
</div>
</section>
Теперь добавим CSS для создания многоколоночного макета:
.content__container {
display: flex;
gap: 30px;
}
.content__main {
flex: 3; /* Занимает 3/4 доступного пространства */
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.sidebar {
flex: 1; /* Занимает 1/4 доступного пространства */
}
.service-card {
flex: 1 1 calc(50% – 10px); /* 2 колонки на среднем экране */
display: flex;
flex-direction: column;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.service-card img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 15px;
}
.service-card h3 {
margin-bottom: 10px;
}
.service-card p {
flex-grow: 1; /* Растягивает текст, чтобы кнопки были на одном уровне */
margin-bottom: 15px;
}
.sidebar__widget {
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.sidebar__widget h3 {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/* Адаптивность */
@media (max-width: 992px) {
.content__main {
flex-direction: column;
}
.service-card {
flex: 1 1 100%;
}
}
@media (max-width: 768px) {
.content__container {
flex-direction: column;
}
.sidebar {
order: -1; /* Перемещаем сайдбар выше основного контента на мобильных */
}
}
Ключевые преимущества использования Flexbox для многоколоночного контента:
- Автоматическое распределение пространства с помощью свойства
flex - Простое изменение порядка элементов с помощью свойства
order - Легкое управление вертикальным выравниванием
- Возможность задать карточкам одинаковую высоту без JavaScript
- Автоматический перенос элементов при изменении размеров экрана
На мобильных устройствах мы используем order: -1 для сайдбара, что позволяет перемещать его выше основного контента без изменения HTML-структуры. Это отличный пример гибкости, которую предоставляет Flexbox. 📱
Построение отзывчивого футера и финальные штрихи сайта
Футер — это не просто завершающая часть сайта, но и важный элемент навигации и предоставления контактной информации. Создадим многоколоночный адаптивный футер с помощью Flexbox.
Добавим HTML-разметку для футера:
<footer class="footer">
<div class="container">
<div class="footer__container">
<div class="footer__column">
<div class="footer-logo">FlexMaster</div>
<p>Современная веб-студия, специализирующаяся на создании адаптивных сайтов с использованием передовых технологий.</p>
<div class="social-icons">
<a href="#" class="social-icon">🐦</a>
<a href="#" class="social-icon">📸</a>
<a href="#" class="social-icon">👨💼</a>
</div>
</div>
<div class="footer__column">
<h3>Навигация</h3>
<ul class="footer-menu">
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
<div class="footer__column">
<h3>Услуги</h3>
<ul class="footer-menu">
<li><a href="#">Веб-разработка</a></li>
<li><a href="#">UI/UX дизайн</a></li>
<li><a href="#">SEO-продвижение</a></li>
<li><a href="#">Контент-маркетинг</a></li>
</ul>
</div>
<div class="footer__column">
<h3>Контакты</h3>
<address>
<p>📍 г. Москва, ул. Примерная, 123</p>
<p>📱 +7 (123) 456-78-90</p>
<p>✉️ info@flexmaster.example</p>
</address>
<form class="subscribe-form">
<input type="email" placeholder="Подпишитесь на новости">
<button type="submit">→</button>
</form>
</div>
</div>
<div class="footer__bottom">
<p>© 2023 FlexMaster. Все права защищены.</p>
</div>
</div>
</footer>
Теперь добавим CSS для футера:
.footer {
background-color: #2c3e50;
color: white;
padding: 60px 0 20px;
}
.footer__container {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 40px;
}
.footer__column {
flex: 1 1 200px; /* Минимальная ширина колонки 200px */
}
.footer-logo {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.social-icons {
display: flex;
gap: 10px;
margin-top: 20px;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
transition: background-color 0.3s;
font-size: 20px;
text-decoration: none;
}
.social-icon:hover {
background-color: #3498db;
}
.footer h3 {
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.footer h3:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background-color: #3498db;
}
.footer-menu {
list-style: none;
}
.footer-menu li {
margin-bottom: 10px;
}
.footer-menu a {
color: #ecf0f1;
text-decoration: none;
transition: color 0.3s;
}
.footer-menu a:hover {
color: #3498db;
}
address p {
margin-bottom: 10px;
}
.subscribe-form {
display: flex;
margin-top: 20px;
}
.subscribe-form input {
flex-grow: 1;
padding: 10px;
border: none;
border-radius: 4px 0 0 4px;
}
.subscribe-form button {
padding: 10px 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.footer__bottom {
padding-top: 20px;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 768px) {
.footer__container {
flex-direction: column;
}
.footer__column {
flex-basis: 100%;
}
}
Финальные штрихи для нашего сайта:
- Добавление анимаций — используйте CSS-переходы для интерактивных элементов:
.button {
display: inline-block;
padding: 12px 24px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
.button:hover {
background-color: #2980b9;
transform: translateY(-2px);
}
.button:active {
transform: translateY(0);
}
.button--small {
padding: 8px 16px;
font-size: 14px;
}
- Оптимизация загрузки — используйте атрибут
loading="lazy"для изображений ниже видимой области экрана:
<img src="images/service2.jpg" alt="Дизайн интерфейсов" loading="lazy">
- Валидация форм — добавьте атрибуты для базовой валидации HTML5:
<input type="email" placeholder="Ваш email" required>
<textarea placeholder="Сообщение" minlength="10" required></textarea>
- Тестирование на различных устройствах — убедитесь, что сайт корректно отображается на экранах разных размеров.
Использование Flexbox для футера дает следующие преимущества:
- Автоматическое выравнивание колонок по высоте
- Гибкая настройка расположения элементов в зависимости от размера экрана
- Автоматическое переключение между горизонтальной и вертикальной ориентацией
- Равномерное распределение пространства между колонками
- Возможность сохранить семантическую структуру HTML
Вот мы и создали полноценный адаптивный сайт с использованием CSS Flexbox! 🎉 Макет автоматически подстраивается под различные размеры экрана, сохраняя при этом читаемость и удобство использования.
CSS Flexbox фундаментально изменил подход к созданию сайтов. Этот инструмент позволяет добиться профессиональных результатов даже начинающим разработчикам, сокращая время верстки и повышая качество конечного продукта. Изучив основы из этого руководства, вы можете продолжить эксперименты, комбинируя флексбоксы с CSS Grid для еще более сложных макетов. Помните: чистый, семантический HTML в сочетании с мощью Flexbox — ваш путь к созданию современных, адаптивных веб-интерфейсов, которые будут работать на любом устройстве.