Что такое 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-элементы.

Создав 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>