1. Размещение элементов с помощью Flexbox
Рассмотрим пример горизонтального меню для портала
университета.
HTML-код:
<nav class="menu">
<a
href="index.html">Главная</a>
<a
href="courses.html">Курсы</a>
<a
href="contacts.html">Контакты</a>
</nav>
CSS-код:
.menu {
display: flex;
justify-content:
center;
align-items:
center;
gap: 20px;
background-color:
#eeeeee;
padding: 15px;
}
.menu a {
color: darkblue;
text-decoration:
none;
}
Объяснение:
display: flex — включает модель Flexbox.
justify-content — распределяет элементы вдоль основной оси.
align-items — выравнивает элементы по поперечной оси.
gap — задаёт расстояние между элементами.
padding — устанавливает внутренние отступы.
Результат: ссылки меню располагаются горизонтально по центру
с одинаковыми промежутками.
2. Создание сетки карточек с помощью CSS Grid
Создадим страницу с тремя учебными курсами.
HTML-код:
<div class="courses">
<div
class="course">WEB-технологии</div>
<div
class="course">Базы данных</div>
<div
class="course">Программирование</div>
</div>
CSS-код:
.courses {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.course {
background-color:
lightblue;
padding: 20px;
text-align:
center;
border: 1px solid
gray;
}
Объяснение:
display: grid — включает сеточную модель CSS Grid.
grid-template-columns — задаёт количество и размеры
столбцов.
repeat(3, 1fr) — создаёт три столбца одинаковой ширины.
gap — задаёт расстояние между карточками.
text-align — выравнивает текст внутри карточек.
Результат: три карточки учебных курсов отображаются в одной
строке, занимая равные доли доступной ширины.
3. Создание адаптивной страницы с помощью медиазапросов
Изменим расположение карточек в зависимости от ширины
экрана.
HTML-код:
<div class="grid">
<div
class="item">Курс 1</div>
<div
class="item">Курс 2</div>
<div
class="item">Курс 3</div>
</div>
CSS-код:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.item {
background-color:
lightgreen;
padding: 20px;
text-align:
center;
}
@media (max-width: 700px) {
.grid {
grid-template-columns: 1fr;
}
}
Объяснение:
@media — задаёт условие применения CSS-правил.
max-width: 700px — применяет правила при ширине области
просмотра не более 700 пикселей.
grid-template-columns: 1fr — создаёт один столбец.
Результат: на широком экране карточки располагаются в три столбца, а на узком экране — в один столбец друг под другом.