Основы CSS: Flexbox и Grid

Введение в CSS

CSS (Cascading Style Sheets) — это язык стилей, который используется для описания внешнего вида документа, написанного на HTML. Он позволяет разделять содержание и оформление, что делает разработку более организованной и эффективной. В этом уроке мы сосредоточимся на двух мощных инструментах CSS — Flexbox и CSS Grid, которые помогают создавать адаптивные и отзывчивые макеты

Основы Flexbox

Что такое Flexbox?

Flexbox (Flexible Box Layout) — это модель компоновки, которая позволяет легко выравнивать и распределять пространство между элементами в контейнере. Она особенно полезна для создания адаптивных макетов, так как элементы могут изменять свои размеры и порядок в зависимости от доступного пространства

Основные свойства Flexbox

• display: flex; — устанавливает контейнер как flex-контейнер
• flex-direction — определяет направление главной оси (row, column, row-reverse, column-reverse)
• justify-content — выравнивает элементы по главной оси (flex-start, flex-end, center, space-between, space-around)
• align-items — выравнивает элементы по поперечной оси (flex-start, flex-end, center, baseline, stretch)
• flex-wrap — управляет переносом элементов на новую строку (nowrap, wrap, wrap-reverse)

Пример применения Flexbox

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

.flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
  margin: 10px;
  flex: 1 1 100px; /* grow, shrink, basis */
}

Интерактивное задание

Создайте простой адаптивный макет с использованием Flexbox. Попробуйте реализовать навигационное меню с элементами, которые будут равномерно распределены по ширине контейнера

Основы CSS Grid

Что такое CSS Grid?

CSS Grid Layout — это система сеточной компоновки, которая позволяет создавать сложные макеты с использованием строк и столбцов. Grid предоставляет больше возможностей для управления пространством и выравниванием, чем Flexbox. Простыми словами, Grid — это двумерная система компоновки, позволяющая создавать сложные макеты с помощью строк и столбцов

Основные свойства CSS Grid

• display: grid; — устанавливает контейнер как grid-контейнер.
• grid-template-columns — определяет количество и размеры столбцов.
• grid-template-rows — определяет количество и размеры строк.
• grid-area — задает область для элемента в сетке.
• gap — устанавливает расстояние между строками и столбцами.

Пример использования CSS Grid

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}

.grid-item {
  background-color: lightgreen;
  padding: 20px;
  text-align: center;
}

Интерактивное задание

Создайте сетку для галереи изображений с использованием CSS Grid. Попробуйте настроить количество столбцов и отступы между элементами

Сравнение Flexbox и Grid

• Flexbox лучше подходит для одноосных макетов (линейные), где элементы располагаются в одну строку или столбец.
• Grid идеально подходит для двухмерных макетов, где необходимо управлять как строками, так и столбцами.

На этом уроке мы изучили основы Flexbox и CSS Grid, а также их применение для создания адаптивных макетов. Теперь у вас есть возможность экспериментировать с этими инструментами и применять их в своих проектах