Основы и терминология
Поскольку flexbox – это целый модуль, а не отдельное свойство, он включает в себя множество вещей, в том числе целый набор свойств. Некоторые из них предназначены для установки на контейнер (родительский элемент, называемый “flex container“), тогда как другие предназначены для установки на дочерние элементы (называемые “flex items“). Рассмотрим полное руководство по flexbox css в данной статье.
Если “обычный” макет основан на направлениях блоков и потока встроенных элементов, то макет flex основан на “flex-flow направлении“. Пожалуйста, посмотрите на эту картинку из спецификации, объясняющую основную идею макета flex.
Элементы будут располагаться либо по главной оси (от начала до конца), либо по поперечной оси (от начала до конца).
- main axis – Главная ось Flex-контейнера — это основная ось, вдоль которой располагаются flex-элементы. Осторожно, это не обязательно горизонтально; это зависит от свойства flex-direction
- main-start | main-end – Flex-элементы размещаются внутри контейнера, начиная с main-start и заканчивая main-end.
- main size – Ширина или высота flex-элемента, в зависимости от того, что находится в основном измерении, является основным размером элемента. Основным свойством размера flex-элемента является свойство «width» или «height», в зависимости от того, что находится в основном измерении.
- cross axis – Ось, перпендикулярная главной оси, называется поперечной осью (cross axis). Его направление зависит от направления главной оси.
- cross-start | cross-end – Flex-линии заполняются элементами и помещаются в контейнер, начиная с поперечной стороны flex-контейнера и двигаясь к поперечной стороне.
- cross size – Ширина или высота flex-элемента, в зависимости от того, что находится в поперечном измерении, является поперечным размером элемента (cross size). Свойство поперечного размера — это то, что из «width» или «height» находится в поперечном измерении.
Видео руководство по Flexbox CSS от Александра Сокирки
Смотрите видео руководство по Flexbox CSS на канале Быть Программистом
Свойства для родительского контейнера (flex container)
Свойство: display
Определяет контейнер flex; inline или block в зависимости от указанного значения. Он создает контекст flex для всех его непосредственных дочерних элементов.
.container {
display: flex; /* or inline-flex */
}
Обратите внимание, что свойство CSS columns не влияют на контейнер flex.
Свойство: flex-direction
Устанавливает главную ось, тем самым определяя направление размещения flex элементов (дочерние элементы) в контейнере flex. Flexbox — это (помимо опциональной обертки) концепция макета с одним направлением. Думайте о flex элементах как о расположении в первую очередь либо в горизонтальных рядах, либо в вертикальных столбцах.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
- row (default): элементы располагаются с лево на право (для rtl с право на лево)
- row-reverse: элементы располагаются в обратном направлении (для rtl с лево на право)
- column: элементы располагаются сверху в низ
- column-reverse: Элементы располагаются с низу в верх.
Свойство: flex-wrap
Свойство CSS flex-wrap
используется в контексте Flexbox и управляет тем, каким образом элементы-потомки распределяются внутри контейнера-родителя, если они не могут поместиться на одной строке.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
Значение flex-wrap: nowrap
указывает, что элементы-потомки не могут переноситься на новую строку и будут продолжать размещаться в одной строке, пока не закончится место.
Значение flex-wrap: wrap
указывает, что элементы-потомки будут переноситься на новую строку, если не могут поместиться на текущей строке.
Значение flex-wrap: wrap-reverse
указывает, что элементы-потомки будут переноситься на новую строку, но расположение строк будет изменено, так что первая строка будет помещена внизу контейнера-родителя, а последняя строка — наверху.
Использование свойства flex-wrap
позволяет гибко управлять тем, каким образом элементы-потомки размещаются внутри контейнера-родителя и помогает создавать более адаптивный дизайн веб-страницы.
CSS свойство: flex-flow
Свойство CSS flex-flow
является комбинацией двух других свойств — flex-direction
и flex-wrap
, и используется для установки направления главной оси и обертывания элементов в контексте Flexbox.
Значение свойства flex-flow
устанавливается через указание двух значений, разделенных пробелом. Первое значение указывает направление главной оси, а второе значение указывает, должны ли элементы переноситься на новую строку или нет.
.container {
flex-flow: row wrap;
}
Здесь row
— это значение свойства flex-direction
, которое устанавливает направление основной оси в горизонтальное положение, а wrap
— это значение свойства flex-wrap
, которое указывает, что элементы могут переноситься на новую строку, если не могут поместиться в текущей строке.
Другие возможные значения для свойства flex-flow
:
- row nowrap: элементы располагаются в ряд, и если они не помещаются в одной строке, они не переносятся на новую строку.
- column wrap: элементы располагаются в столбец, и если они не помещаются в одной колонке, они переносятся на новую колонку.
- column-reverse nowrap: элементы располагаются в столбец в обратном порядке, и если они не помещаются в одной колонке, они не переносятся на новую колонку.
CSS свойство: justify-content
Свойство CSS justify-content
применяется к родительскому контейнеру в Flexbox и определяет, как его дочерние элементы будут выравниваться вдоль главной оси.
С помощью justify-content
можно управлять размещением элементов по всей ширине контейнера в горизонтальном режиме или по всей высоте в вертикальном режиме.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
Доступные значения для свойства justify-content
включают:
- flex-start: Элементы выравниваются по началу главной оси.
- flex-end: Элементы выравниваются по концу главной оси.
- center: Элементы выравниваются по центру главной оси.
- space-between: Элементы выравниваются с равным пространством между ними.
- space-around: Элементы выравниваются с равным пространством вокруг каждого элемента.
- space-evenly: Элементы выравниваются с равным пространством между ними и вокруг каждого элемента.
Для свойства CSS justify-content
также доступны значения start
и end
, которые выравнивают элементы по началу или концу главной оси в зависимости от направления чтения (для горизонтального направления это будет left и right соответственно, а для вертикального — top
и bottom
).
- start (или flex-start): элементы выравниваются по началу главной оси, с учетом направления чтения. Если главная ось направлена горизонтально слева направо, то элементы выровнены по левому краю контейнера. Если ось направлена вертикально сверху вниз, элементы будут выровнены по верхнему краю контейнера.
- end (или flex-end): элементы выравниваются по концу главной оси, с учетом направления чтения. Если главная ось направлена горизонтально слева направо, то элементы выровнены по правому краю контейнера. Если ось направлена вертикально сверху вниз, элементы будут выровнены по нижнему краю контейнера.
Использование start
и end
особенно полезно в многоязычных веб-сайтах, где направление чтения меняется в зависимости от языка. Например, для арабского языка, где направление чтения справа налево, использование justify-content: start
выровняет элементы по правому краю контейнера, а использование justify-content: end
— по левому краю.
Свойство justify-content
является мощным инструментом для создания гибких макетов веб-страниц, и позволяет точно контролировать расположение элементов внутри Flexbox.
Свойство: align-items (Руководство по flexbox css)
Свойство CSS align-items определяет, как дочерние элементы в Flexbox выравниваются вдоль поперечной оси. Оно применяется к родительскому контейнеру и контролирует вертикальное выравнивание элементов.
С помощью align-items
можно контролировать положение элементов в контейнере по вертикали, выравнивая их по верхней, нижней, центральной линии или выравнивая их между ними.
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
Доступные значения для свойства align-items
включают:
- flex-start: элементы выравниваются по началу поперечной оси.
- flex-end: элементы выравниваются по концу поперечной оси.
- center: элементы выравниваются по центру поперечной оси.
- baseline: элементы выравниваются по базовой линии (например, линии текста).
- stretch: элементы растягиваются, чтобы занять высоту контейнера.
Значение stretch
является значением по умолчанию, что означает, что элементы будут растягиваться, чтобы занять все доступное пространство в контейнере. Однако, для того чтобы работало свойство stretch
, высота контейнера должна быть установлена.
Свойство align-items
может быть использовано вместе с justify-content
, чтобы создать гибкий дизайн веб-страницы, который точно соответствует потребностям пользователей. Комбинируя значения align-items
и justify-content
, можно добиться точного позиционирования элементов в контейнере, независимо от размеров или количества этих элементов.
Свойство: align-content
Свойство CSS align-content определяет, как Flexbox распределяет дополнительное пространство по поперечной оси, если все элементы не помещаются в контейнер. Оно применяется к родительскому контейнеру и позволяет управлять выравниванием и расстоянием между строками элементов.
С помощью align-content
можно контролировать положение строк элементов в контейнере, выравнивая их по верхней, нижней или центральной линии или распределяя их равномерно между ними.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
Доступные значения для свойства align-content
включают:
- flex-start: строки элементов выравниваются по началу поперечной оси.
- flex-end: строки элементов выравниваются по концу поперечной оси.
- center: строки элементов выравниваются по центру поперечной оси.
- space-between: строки элементов распределяются равномерно по контейнеру, с одинаковыми промежутками между ними, и с крайними строками прижатыми к краям контейнера.
- space-around: строки элементов распределяются равномерно по контейнеру, с равными промежутками между строками и по краям контейнера.
- stretch: строки элементов растягиваются, чтобы занять высоту контейнера.
Значение stretch
является значением по умолчанию, что означает, что строки элементов будут растягиваться, чтобы занять все доступное пространство в контейнере. Однако, для того чтобы работало свойство stretch
, высота контейнера должна быть установлена.
Свойство align-content
может быть использовано вместе с align-items
и justify-content
, чтобы создать гибкий дизайн веб-страницы, который точно соответствует потребностям пользователей. Комбинируя значения align-content
, align-items
и justify-content
, можно добиться точного позиционирования элементов в контейнере, независимо от размеров или количества этих элементов.
Свойства: gap, row-gap, column-gap (Руководство по flexbox css)
Свойства CSS gap
, row-gap
и column-gap
используются для управления промежутками между элементами в CSS Grid и Flexbox контейнерах.
Свойство gap
определяет промежуток между строками и столбцами внутри контейнера. Оно является сокращенной записью для row-gap
и column-gap
.
Свойство row-gap
устанавливает расстояние между строками элементов внутри контейнера.
Свойство column-gap
устанавливает расстояние между столбцами элементов внутри контейнера.
Значения данных свойств могут быть заданы в любых единицах измерения, таких как пиксели, проценты, em, rem и т.д.
Использование этих свойств позволяет легко и быстро контролировать расстояние между элементами, что может быть особенно полезно для создания сеточных макетов, где требуется точное позиционирование элементов.
Свойства для дочерних элементов (flex items) (Руководство по flexbox css)
Свойство order (Руководство по flexbox css)
Свойство CSS order
позволяет изменять порядок расположения элементов внутри Flexbox-контейнера. Оно позволяет задать порядковый номер для каждого элемента в контейнере, что влияет на их расположение относительно друг друга.
Значения свойства order
— это целые числа, которые определяют порядок следования элементов внутри контейнера. Элементы с меньшим числом будут идти раньше элементов с большим числом. Если два элемента имеют одинаковый порядковый номер, то их позиция будет определяться их порядком в исходном HTML-коде.
.item {
order: 5; /* default is 0 */
}
Значение свойства order
по умолчанию равно 0, что означает, что элементы следуют в порядке, указанном в исходном коде. Значения меньше 0 и больше 0 позволяют изменять порядок следования элементов внутри контейнера.
Свойство order
не влияет на размеры или позиционирование элементов внутри контейнера, а только на их порядок следования. Оно может использоваться для изменения порядка отображения элементов на разных устройствах, для создания анимации или для упорядочивания элементов в зависимости от их важности.
Cвойство: flex-grow (Руководство по flexbox css)
Свойство CSS flex-grow
определяет, насколько Flexbox-элемент будет растягиваться внутри Flexbox-контейнера. Оно управляет распределением свободного пространства между Flexbox-элементами в зависимости от их значения flex-grow
.
Значения свойства flex-grow
— это неотрицательные числа, которые указывают, какую долю свободного пространства внутри контейнера должен занимать каждый элемент. Если установить flex-grow: 1
на все элементы контейнера, то они будут равномерно распределены по доступному пространству.
.item {
flex-grow: 3; /* default 0 */
}
Значение по умолчанию для свойства flex-grow
равно 0, что означает, что элемент не будет растягиваться, если есть свободное пространство. Если установить flex-grow
на элемент, то он будет занимать все свободное пространство, которое не было занято другими элементами.
Свойство: flex-shrink (Руководство по flexbox css)
Свойство CSS flex-shrink
определяет, насколько Flexbox-элемент должен уменьшаться внутри Flexbox-контейнера в случае, если доступное пространство для элементов меньше, чем необходимо для их размещения. Значение свойства flex-shrink
указывает, какую долю своего размера элемент должен потерять в этом случае. Значение по умолчанию для свойства flex-shrink
равно 1, что означает, что элемент будет уменьшаться пропорционально своему размеру, если нет достаточно пространства для размещения всех элементов. Значение 0 означает, что элемент не должен уменьшаться, если для размещения всех элементов нет достаточно места. Если установить значение flex-shrink
больше 1, то элемент будет уменьшаться быстрее, чем другие элементы с меньшим значением flex-shrink
.
.item {
flex-shrink: 3; /* default 1 */
}
Свойство: flex-basis (Руководство по flexbox css)
Свойство CSS flex-basis
определяет базовый размер Flexbox-элемента перед распределением свободного пространства внутри Flexbox-контейнера. Значение свойства flex-basis
задает начальный размер элемента, который может быть изменен позже с помощью свойств flex-grow
и flex-shrink
.
Значение flex-basis
может быть установлено в пикселях, процентах, em и других единицах измерения. Кроме того, можно установить значение auto
, которое означает, что размер элемента будет определен его содержимым. Значение по умолчанию для flex-basis
равно auto
.
.item {
flex-basis: | auto; /* default auto */
}
Свойство flex-basis
часто используется в сочетании с другими свойствами Flexbox, такими как flex-grow
и flex-shrink
, для создания гибких макетов, которые легко масштабируются и адаптируются под различные размеры экранов и устройства. Например, можно установить flex-basis: 100px
на один элемент и flex-basis: 50px
на другой, чтобы создать макет, в котором один элемент будет занимать больше места, чем другой. Когда доступное пространство внутри контейнера будет распределяться между элементами, элемент с flex-basis: 100px
будет получать больше пространства, чем элемент с flex-basis: 50px
.
Свойство: flex (Руководство по flexbox css)
Свойство CSS flex
— это комбинация трех свойств: flex-grow
, flex-shrink
и flex-basis
, которые определяют, как Flexbox-элемент будет изменять свой размер и как он будет располагаться внутри Flexbox-контейнера.
Значение свойства flex
устанавливается с помощью трех аргументов, разделенных пробелами: flex-grow
, flex-shrink
и flex-basis
. Например, значение flex: 1 0 100px
означает, что элемент должен растягиваться, но не должен уменьшаться, и его базовый размер должен быть 100 пикселей.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Значение flex-grow
определяет, насколько элемент может растягиваться внутри Flexbox-контейнера, если имеется свободное пространство. Значение flex-shrink
определяет, насколько элемент должен уменьшаться, если доступное пространство меньше, чем необходимо для размещения всех элементов. Значение flex-basis
определяет базовый размер элемента перед распределением свободного пространства внутри Flexbox-контейнера.
Значение flex
может быть установлено на отдельные Flexbox-элементы или на Flexbox-контейнеры. Когда значение flex
устанавливается на контейнер, оно распространяется на все дочерние элементы контейнера.
Свойство flex
является мощным инструментом для создания гибких макетов, которые легко масштабируются и адаптируются под различные размеры экранов и устройства. Оно может быть использовано для задания сложных правил расположения элементов, которые будут работать на широком диапазоне экранов и устройств.
Свойство: align-self (Руководство по flexbox css)
Свойство CSS align-self
определяет, как Flexbox-элемент должен выравниваться в направлении поперечной оси внутри Flexbox-контейнера. Оно позволяет переопределить значение, установленное свойством align-items
на Flexbox-контейнере для конкретного элемента.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Свойство align-self
может иметь следующие значения:
- auto — значение по умолчанию, когда элемент выравнивается в соответствии со значением свойства
align-items
на Flexbox-контейнере. - flex-start — элемент выравнивается в начале поперечной оси контейнера.
- flex-end — элемент выравнивается в конце поперечной оси контейнера.
- center — элемент выравнивается по центру поперечной оси контейнера.
- baseline — элемент выравнивается на базовой линии контейнера, что полезно для элементов с разными размерами шрифта.
- stretch — элемент растягивается, чтобы занять всю доступную высоту поперечной оси контейнера.
Значение свойства align-self
применяется только к отдельному Flexbox-элементу и переопределяет значение свойства align-items
на Flexbox-контейнере для этого элемента. Это позволяет создавать гибкие макеты, в которых разные элементы могут быть выровнены по-разному в зависимости от своих индивидуальных потребностей в выравнивании.
Итог по Flexbox CSS
Flexbox — это мощный инструмент для создания гибких макетов веб-страниц, который позволяет управлять расположением элементов в контейнере. С помощью свойств, таких как flex-direction
, justify-content
, align-items
и других, можно легко создавать адаптивные макеты, которые отзываются на изменения размеров экрана и адаптируются под различные устройства. Кроме того, Flexbox обладает простым и интуитивно понятным синтаксисом, что делает его доступным для всех уровней опыта веб-разработки. Использование Flexbox может существенно упростить создание сложных макетов и повысить эффективность разработки.