Что такое Flex Box?

Часть раздела Styling with 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>