В этом уроке мы погрузимся в понятие "Flex Container" - ключевого игрока в создании адаптивных и эффективных веб-макетов.

Гибкость, удобство и множество возможностей делают Flex Container незаменимым инструментом для веб-дизайнера. Давайте начнем!

Что такое Flex Container?

Flex Container - это HTML-элемент, который мы превращаем в гибкий контейнер, используя свойство display: flex; или display: inline-flex; в CSS. Этот контейнер становится исходной точкой для создания гибких макетов с помощью Flexbox.

Основы Flex Container

Давайте начнем с основ. Когда вы применяете display: flex; к элементу, этот элемент становится Flex Container. Это позволяет дочерним элементам внутри контейнера использовать преимущества гибких макетов.

CSS

.flex-container {
 display: flex;
}

HTML

  <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 с тремя дочерними элементами (flex items). Когда применяется свойство display: flex; к контейнеру, он становится гибким блоком, что позволяет дочерним элементам автоматически выстраиваться в горизонтальном направлении.

Направление элементов

Flex Container имеет две оси - главную и поперечную. Главная ось определяется свойством flex-direction. Например, flex-direction: row; делает главную ось горизонтальной, а flex-direction: column; - вертикальной.

CSS

.flex-container {
 display: flex;
 flex-direction: column; /* или row*/
}

HTML

<div class="flex-container">
    <div class="flex-item">Коробка</div>
    <div class="flex-item">Коробка</div>
    <div class="flex-item">Коробка</div>
  </div>

Этот пример демонстрирует использование свойства flex-direction. При установке flex-direction: column; главная ось становится вертикальной, и дочерние элементы теперь выстраиваются в столбец, а не в строку, как в первом примере.

Переносы внутри контейнера

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

.flex-container {
 display: flex;
 /* переносы автоматически управляются */
}

Выравнивание элементов

Свойство align-items используется для выравнивания элементов вдоль поперечной оси. Оно позволяет центрировать элементы, выстраивать их в начале или в конце контейнера.

.flex-container {
 display: flex;
 align-items: center; /* или flex-start, flex-end */
}

Гибкий размер

Flex Container дает нам возможность создавать гибкие макеты, где элементы могут растягиваться или сжиматься в зависимости от доступного пространства. Но, чтобы понять это более глубоко, давайте оставим этот вопрос для будущих уроков.

.flex-item {
 /* гибкий размер оставим для следующих уроков */
}

Заключение

Flex Container - это ключевой инструмент для создания современных, гибких и адаптивных веб-макетов. В этом уроке мы только заглянули в мир его возможностей. Следующие уроки будут посвящены более глубокому пониманию направления элементов, управлению переносами, выравниванию элементов и созданию гибких размеров.