Понимание CSS Flexbox (Часть 1)
Это первый урок из серии из двух частей. Эта часть посвящена тому, что такое flexbox, и свойствам контейнера flexbox. Во второй части рассказывается о свойствах flex-элементов.
Тем не менее, давайте начнем!
Что такое флексбокс
Модуль гибкого блока — это метод компоновки, который распределяет пространство по одной строке или столбцу. В отличие от других методов компоновки, flexbox обеспечивает эффективный способ гибкой (правильной) компоновки, выравнивания и распределения пространства между элементами в контейнере.
Вот ссылка на сайт к определению MDN для Flexbox.
Основные термины
Чтобы понять flexbox, мы должны сначала поговорить о некоторых терминах, связанных с flexbox. Обратите внимание, что эти термины будут использоваться в этом руководстве.
- Гибкий контейнер: Согласно MDN, flex-контейнер — это область документа, созданная с помощью flexbox. Это родительский элемент, который содержит дочерние элементы. Это может быть div, ul и т.д.
- Гибкий элемент: Flex-элемент — это дочерний элемент внутри flex-контейнера.
- Основная ось: Основная ось гибкого контейнера определяется как направление, в котором расположены гибкие элементы.
- Поперечная ось: Поперечная ось — это ось, перпендикулярная главной оси. Например, если для flex-direction вашего контейнера установлено значение row, то есть элементы расположены горизонтально, тогда поперечная ось будет проходить вдоль столбца и наоборот.
Рисунок ниже поможет вам лучше понять терминологию.
Терминология Flexbox
Флексбокс в действии
Теперь, когда вы знаете основы flexbox, давайте посмотрим на него в действии. Первое, что нужно сделать при использовании flexbox, — это определить flex-контейнер. Для этого вы устанавливаете свойство display: flex на родительском контейнере.
HTML ниже содержит контейнер div (родительский элемент) и другие div (дочерние элементы). Мы будем использовать это для подробного объяснения CSS flexbox.
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
Чтобы увидеть flexbox в действии, добавьте свойство display: flex.
.container {
display: flex;
}
Добавьте немного стиля в дочерние разделы
.container > div {
background-color: maroon;
min-height: 100px;
margin: 10px;
width: 100px;
}
Вот как должен выглядеть вывод.
Я объясню, что только что произошло. Установив свойство дисплей: гибкий в родительском div вы сразу делаете родительский элемент гибкий контейнер и дочерние элементы гибкие элементы.
Как вы могли знать или не знать, див является блочным элементом, и вы, возможно, ожидали, что вывод будет примерно таким.
Ну, по умолчанию flexbox автоматически делает flex-элементы встроенными элементами (ура! Я наконец-то использовал это слово), что заставляет flex-элементы располагаться горизонтально, а не вертикально. Вы можете решить, чтобы гибкие элементы складывались вертикально или в обратном направлении, добавив свойство с именем flex-направление но я позволю вам переварить то, что вы узнали, и объясню это в следующем разделе.
Свойства Flex-контейнера
Flex-контейнер имеет некоторые свойства, которые позволяют вам стилизовать flex-элементы так, как вы хотите. Свойства гибкого контейнера объясняются ниже.
1. Flex-направление: Свойство flex-direction управляет направлением flex-элементов. Это позволяет вам изменить направление гибких элементов.
Свойство flex-direction принимает любое из четырех значений: строка, обратная строка, столбец, обратная колонка. Эти свойства позволяют выравнивать гибкие элементы по горизонтали (основная ось) или по вертикали (поперечная ось).
По умолчанию для свойства flex-direction установлено значение row. Вот почему на первом изображении элемента-контейнера все flex-элементы располагались горизонтально слева направо.
Давайте изменим свойство flex-direction на column и посмотрим, что произойдет.
.container {
display: flex;
flex-direction: column
}
Это то, что вы должны иметь.
Элементы Flex сложены вертикально (сверху вниз)
Значение свойства flex-direction позволило нам изменить направление flex-элементов, что позволило элементам перемещаться сверху вниз.
Обратите внимание, что, установив для свойства flex-direction значение столбецГлавная ось проходит по вертикальной оси, а поперечная ось проходит по горизонтальной оси.
Смотрите изображение ниже
Главные и поперечные оси
2. Flex-обертка: Свойство Flex-wrap позволяет размещать гибкие элементы на нескольких строках. По умолчанию для свойства flex-wrap установлено значение сейчас это означает, что гибкие элементы устанавливаются только на одной строке.
Когда для свойства flex-wrap установлено значение nowrap, flex-элементы, независимо от их количества, будут сжиматься, чтобы гарантировать, что они помещаются на одной строке.
Поясню дальше на примере. Я добавлю еще пять элементов div к родительскому элементу.
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.container {
display: flex;
}
Как будет выглядеть результат? Что ж, посмотрим.
Добавьте больше элементов к родительскому элементу
Вы заметите, что элементы должны были уменьшиться, чтобы поместиться на одной строке.
Давайте теперь установим для свойства flex-wrap значение сворачивать
.container {
flex-wrap: wrap
}
См. вывод ниже
Flex-wrap установлен для обертывания
Вы заметите, что гибкие элементы не сжимались и не пытались уместиться на одной строке. Вместо этого гибкие элементы сохраняли свою ширину по умолчанию и перемещали оставшиеся элементы div на новую строку, когда они больше не могли помещаться на одной строке.
Свойство flex-wrap также принимает другое значение, называемое обертка-обратная. обертка-обратная работает как сворачивать в обратном направлении.
.container {
flex-wrap: wrap-reverse;
}
Flex-wrap настроен на обратную обертку
3. Обоснование содержания: Свойство justify-content выравнивает элементы по главной оси в контейнере. Свойство Justify-content использует любое из этих значений: flex-start, flex-end, center, space-around, space-between, space-evenly.
— Гибкий старт: Flex-start выстраивает все flex-элементы с начала контейнера. По умолчанию для свойства justify-content установлено значение flex-start. Вот почему все гибкие элементы располагаются горизонтально слева направо.
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
.container {
display: flex;
justify-content: flex-start;
}
Вывод будет выглядеть следующим образом:
justify-content установлен на flex-start
— Гибкий конец: Flex-end выстраивает все flex-элементы в конец контейнера.
.container {
justify-content: flex-end;
}
justify-content установлен на flex-end
— Центр: Center выравнивает все гибкие элементы по центру контейнера.
.container {
justify-content: center;
}
justify-content установлен по центру
— Равномерно по пространству: Space-evenly равномерно распределяет пространство вокруг каждого элемента в контейнере.
.container {
justify-content: space-evenly;
}
для выравнивания содержимого установлено значение space-evenly
— Пространство-вокруг: Space-around назначает пространство слева и справа от каждого гибкого элемента в контейнере. Разница здесь в том, что space-around назначает половину пространства для каждой стороны гибкого элемента. Например, если между div 1 и 2 существует поле/пробел в 20 пикселей, 10 пикселей назначаются справа от div 1, а остальные 10 пикселей назначаются слева от div 2. Следовательно, поля/пробел слева и справа каждого гибкого элемента составляет 10 пикселей. Но так как div 1 является первым элементом в контейнере, он будет иметь поле 10px слева и поле 20px справа из-за поля, назначенного div 2 слева.
.container {
justify-content: space-around;
}
для justify-content установлено значение space-around
— Пробел между: Для промежуточного пространства первый и последний элементы размещаются на краю контейнера, а оставшееся пространство равномерно распределяется вокруг других элементов в контейнере.
.container {
justify-content: space-between;
}
См. вывод ниже.
justify-content установлен в пробел между
4. Выравнивание элементов: Свойство Align-items выравнивает элементы по поперечной оси контейнера. Как и другие свойства, свойство align-item принимает ряд значений, таких как flex-start, flex-end, центр, растяжка.
— Протяжение: Это «растягивает» гибкие элементы, чтобы заполнить весь контейнер по поперечной оси. Значение по умолчанию для свойства align-items — stretch. Вот почему все элементы по умолчанию занимают все пространство на поперечной оси.
Мы бы добавили родительскому контейнеру высоту 300 пикселей, чтобы увидеть значение растяжения в действии.
.container {
display: flex;
min-height: 300px;
align-items: stretch;
}
Обратите внимание, что вам не нужно добавлять свойство align-items: stretch потому что это значение по умолчанию для align-items. Я просто добавил это для лучшего понимания.
align-items настроены на растяжение
Обратите внимание, как flex-элементы растянулись, чтобы заполнить весь контейнер.
— Гибкий старт: Предметы выкладываются от начала контейнера по поперечной оси.
.container {
align-items: flex-start;
}
align-items установлен на flex-start
— Гибкий конец: Как и ожидалось, Items выкладываются с конца контейнера по поперечной оси.
.container {
align-items: flex-end;
}
align-items установлен на flex-end
— Центр: Центрирует все гибкие элементы в центре контейнера вдоль поперечной оси.
.container {
align-items: center;
}
выравнивание элементов по центру
5. Гибкий поток: Flex-flow представляет собой комбинацию свойств flex-direction и flex-wrap. Он принимает два значения: значения flex-direction и flex-wrap соответственно. Он может принимать любое из этих значений:
.container {
flex-flow: row wrap || column wrap || row nowrap;
}
Вы можете попробовать другие комбинации, чтобы увидеть результат.
Вывод
Теперь, когда вы изучили основы flexbox, вы можете сделать еще один шаг, создав что-то простое, например, шаблон веб-сайта, используя flexbox.
Ниже приведен пример приложения, которое я создал с помощью flexbox.
Приложение, созданное с использованием flexbox
Спасибо за чтение!
