Что такое 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: Определяет направление флекс-элементов (row, column, row-reverse, column-reverse).
justify-content: Выравнивает флекс-элементы вдоль главной оси (например, 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.

Шпаргалка

Чтобы создать flex-контейнер, установите свойство display в значение flex:

.container {
    display: flex;
}

Это превращает элемент в flex-контейнер, а его прямых потомков — в flex-элементы.

Общие свойства Flexbox для управления макетом:

flex-direction: Направление flex-элементов (row, column, row-reverse, column-reverse)
justify-content: Выравнивает элементы вдоль главной оси (flex-start, flex-end, center, space-between, space-around)
align-items: Выравнивает элементы вдоль поперечной оси (flex-start, flex-end, center, baseline, stretch)
flex-wrap: Управляет переносом элементов (wrap, nowrap, wrap-reverse)
align-content: Выравнивает 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>