Карта сайта

Урок 19: Flexbox в HTML и CSS

/Уроки по HTML/CSS/Урок 19: Flexbox в HTML и CSS
Урок 19: Flexbox в HTML и CSS
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

В 19-ом уроке мы продолжим наш курс по изучению HTML и CSS. Мы уже прошли много интересных тем и сегодняшний урок будет посвящен одной из самых мощных и гибких технологий в CSS — Flexbox. Если вы хотите научиться легко и быстро создавать адаптивные макеты, то Flexbox это то, что вам нужно. Давайте разберемся, как это работает и попрактикуемся на реальных примерах.

Что такое Flexbox?

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

Flexbox особенно полезен, когда вам нужно:

  • Равномерно распределить пространство между элементами.
  • Выровнять элементы по вертикали или горизонтали.
  • Создать адаптивные макеты, которые легко перестраиваются под разные размеры экранов.

Основы Flexbox

Чтобы начать использовать Flexbox, нужно создать flex-контейнер. Для этого достаточно добавить свойство display: flex; к элементу. Все дочерние элементы этого контейнера автоматически становятся flex-элементами.

Пример:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container {
  display: flex;
}

Теперь все элементы внутри .container будут выстроены в ряд по горизонтали. Это поведение по умолчанию для Flexbox.

Основная ось (row, column)

Flexbox работает с двумя осями: основной осью и поперечной осью. Основная ось определяет направление, в котором выстраиваются элементы. По умолчанию это горизонтальная ось (row), но вы можете изменить ее на вертикальную (column).

Основная ось: row

Когда основная ось это row, элементы выстраиваются в строку (горизонтально). Это значение по умолчанию.

Пример:

.container {
  display: flex;
  flex-direction: row; /* Элементы выстроятся в строку */
}

Основная ось: column

Когда основная ось это column, элементы выстраиваются в столбец (вертикально).

Пример:

.container {
  display: flex;
  flex-direction: column; /* Элементы выстроятся в столбец */
}

Распределение элементов

Одна из самых мощных возможностей Flexbox это управление распределением элементов вдоль основной оси. Для этого используются свойства justify-content и align-items.

justify-content

Это свойство управляет выравниванием элементов вдоль основной оси. Оно может принимать следующие значения:

  • flex-start: элементы выравниваются по началу оси (по умолчанию).
  • flex-end: элементы выравниваются по концу оси.
  • center: элементы выравниваются по центру оси.
  • space-between: элементы равномерно распределяются по оси, первый элемент в начале, последний в конце.
  • space-around: элементы равномерно распределяются с равным пространством вокруг них.
  • space-evenly: элементы распределяются с равным пространством между ними и по краям.

Пример:

.container {
  display: flex;
  justify-content: space-between; /* Элементы равномерно распределены */
}

align-items

Это свойство управляет выравниванием элементов вдоль поперечной оси. Оно может принимать следующие значения:

  • flex-start: элементы выравниваются по началу поперечной оси.
  • flex-end: элементы выравниваются по концу поперечной оси.
  • center: элементы выравниваются по центру поперечной оси.
  • stretch: элементы растягиваются, чтобы заполнить контейнер (по умолчанию).
  • baseline: элементы выравниваются по их базовой линии.

Пример:

.container {
  display: flex;
  align-items: center; /* Элементы выровнены по центру поперечной оси */
}

Практические задачи

Давайте закрепим материал на практике. Попробуйте выполнить следующие задачи:

Задача 1: Создайте горизонтальный макет с равномерным распределением элементов

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container {
  display: flex;
  justify-content: space-around;
}

Задача 2: Создайте вертикальный макет с выравниванием по центру

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Задача 3: Создайте адаптивный макет с элементами, которые растягиваются на всю высоту контейнера

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.container {
  display: flex;
  height: 300px;
  align-items: stretch;
}

.item {
  flex: 1;
  border: 1px solid #000;
}

Flexbox это мощный инструмент, который значительно упрощает создание макетов. Сегодня мы разобрали основы. Как создать flex-контейнер, как управлять направлением основной оси и как распределять элементы.

Если вы хотите изучить HTML и CSS от начала и до конца, обязательно посмотрите мой полный курс по ссылке: HTML/CSS для начинающих.

Надеюсь, этот урок был полезен для вас. Если у вас остались вопросы, пишите в комментариях,и я обязательно помогу.