Что такое Flex Box?

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 44 из 76.

В CSS макет Flexbox — это мощный инструмент, который предоставляет эффективный способ выполнять align и распределять пространство между items в container. С помощью Flexbox вы можете управлять выравниванием, direction, порядком и размером элементов внутри container, создавая гибкие и динамичные макеты, адаптирующиеся к разным размерам экранов и устройствам.

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

Вот базовый синтаксис для создания flex-контейнера:

.container {
    display: flex;
}

display: flex;: Это объявление превращает выбранный элемент в flex-контейнер, а его непосредственных дочерних элементов — в flex-элементы.

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

flex-direction: задаёт направление элементов flex (row, column, row-reverse, column-reverse).
justify-content: выравнивает элементы flex вдоль главной оси (например, flex-start, flex-end, center, space-between, space-around).

align-items: Выравнивает flex-элементы вдоль поперечной оси (например, flex-start, flex-end, center, baseline, stretch).
flex-wrap: Определяет, должны ли flex-элементы переноситься на несколько строк (wrap, nowrap, wrap-reverse).
align-content: Выравнивает flex-линии, когда на поперечной оси есть дополнительное пространство (аналогично justify-content, но для нескольких линий).

Задание

Легко

Вам дан HTML-документ с разделом (<div>), содержащим три дочерних раздела (<div>). Ваша задача — использовать свойство display: flex;, чтобы превратить родительский раздел во flex-контейнер. Выполните следующие шаги:

Напишите правило CSS, которое выбирает элемент <div> с классом container.
Установите для свойства display элемента .container значение flex.

Попробуйте сами

<html>
<head>
    <title>What is a Flex Box?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>