Black Baron

При создании современных веб-страниц разработчики часто сталкиваются с задачей удобного выравнивания элементов, распределения пространства между ними и построения адаптивных интерфейсов. Ранее для этих целей использовались такие подходы, как float или сложное позиционирование, однако они имели ряд ограничений. С появлением Flexbox (гибкой модели компоновки) работа с расположением элементов стала значительно проще и удобнее. В данной статье рассмотрим, что такое Flexbox, как он работает и как применять его на практике.

Что такое Flexbox

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

Чтобы начать использовать Flexbox, необходимо задать контейнеру свойство:

.container {

    display: flex;

}

После этого все дочерние элементы становятся flex-элементами.

Основные оси Flexbox

При работе с Flexbox важно понимать две оси:

• главная ось (main axis) — направление расположения элементов;
• поперечная ось (cross axis) — перпендикулярное направление.

По умолчанию главная ось направлена слева направо.

Свойство flex-direction

Определяет направление главной оси:

.container {

    display: flex;

    flex-direction: row; /* по умолчанию */

}

Возможные значения:

• row — элементы располагаются в строку;
• column — элементы располагаются в столбец;
• row-reverse — в обратном порядке;
• column-reverse — в обратном порядке по вертикали.

Выравнивание по главной оси — justify-content

Позволяет управлять распределением элементов по главной оси:

.container {

    display: flex;

    justify-content: center;

}

Основные значения:

• flex-start — в начале;
• flex-end — в конце;
• center — по центру;
• space-between — равномерно с промежутками;
• space-around — с отступами вокруг элементов.

Выравнивание по поперечной оси — align-items

Определяет расположение элементов по поперечной оси:

.container {

    display: flex;

    align-items: center;

}

Основные значения:

• stretch — растягивает элементы (по умолчанию);
• flex-start — в начале;
• flex-end — в конце;
• center — по центру.

Расстояние между элементами — gap

Позволяет задать отступы между flex-элементами:

.container {

    display: flex;

    gap: 10px;

}

Это удобная альтернатива использованию margin.

Свойства flex-элементов

Свойство flex

Определяет, как элемент будет занимать доступное пространство:

.item {

    flex: 1;

}

Это означает, что все элементы будут равномерно распределять ширину контейнера.

Свойство align-self

Позволяет задать индивидуальное выравнивание для конкретного элемента:

.item {

    align-self: flex-end;

}

Практические примеры

Центрирование элемента

Один из самых популярных сценариев:

.container {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 200px;

}

Элемент будет выровнен по центру как по горизонтали, так и по вертикали.

Простое меню

<div class="menu">

    <a href="#">Главная</a>

    <a href="#">О нас</a>

    <a href="#">Контакты</a>

</div>

.menu {

    display: flex;

    justify-content: space-between;

}

Карточки

.container {

    display: flex;

    gap: 15px;

}

.card {

    flex: 1;

    padding: 10px;

    border: 1px solid #ccc;

}

Карточки автоматически распределяются по ширине.

Flexbox является мощным инструментом для построения современных интерфейсов. Он значительно упрощает выравнивание элементов, управление их расположением и создание адаптивных макетов. В отличие от устаревших методов, Flexbox предлагает гибкий и понятный подход к вёрстке. Освоение этой технологии позволяет разработчику быстрее создавать удобные и аккуратные интерфейсы, а также закладывает основу для дальнейшего изучения более сложных инструментов CSS.