Что такое Flex Box?

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

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

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

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

.container {
    display: flex;
}

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

Когда у вас есть 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>