Кратко
Традиционные решения компоновки основаны на блочной модели, опираясь наdisplay + position + floatспособ достижения, меньшей гибкости. В 2009 году W3C предложила новое решение — Flex, Flex — это аббревиатура от Flexible Box, что означает «гибкая компоновка». Flex позволяет легко, полно и оперативно реализовывать различные макеты страниц. Давайте начнем с базовой грамматики и почувствуем прелесть Flex вместе!
1 Основные понятия
Элементы, использующие раскладку Flex, называются flex-контейнерами или, для краткости, «контейнерами». Все его дочерние элементы автоматически становятся членами контейнера, называемыми flex-элементами (flex-элементами), или для краткости «items».
Контейнер по умолчанию имеет две оси: горизонтальную главную ось (основную ось) и вертикальную поперечную ось (поперечную ось). Начальное положение главной оси (пересечение с границей) называется основным началом, а конечное положение — основным концом, начальное положение поперечной оси — поперечным началом, а конечное положение — поперечным концом.
Flex-элементы по умолчанию располагаются вдоль главной оси. Пространство по главной оси, занимаемое одним элементом, называется основным размером, а занимаемое им пространство по поперечной оси называется поперечным размером.
Свойства Flex разделены на две части: одна часть действует на контейнер, называемый атрибутом контейнера, а другая часть действует на элемент, называемый атрибутом элемента. Ниже мы представим их по частям.
2 свойства контейнера Flex
2.1 определение гибкого контейнера
Основной синтаксис:
.box {
display: flex; /* 或者 inline-flex */
}
Приведенный выше метод написания определяет гибкий контейнер, который может быть блочным контейнером или встроенным контейнером в зависимости от установленного значения. Это дает непосредственным дочерним элементам гибкий контекст.
2.2 flex-direction
flex-directionСвойство определяет ориентацию главной оси (то есть направление расположения элементов).
Основной синтаксис:
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
-
rowУказывает порядок слева направо -
row-reverseУказывает порядок справа налево -
columnзначит сверху вниз -
column-reverseУказывает порядок снизу вверх
Демонстрационная программа:
2.3 flex-wrap
По умолчанию flex-элементы располагаются на линии (или «оси»). мы можем пройтиflex-wrapНастройка этого свойства позволяет оборачивать элементы Flex.
Основной синтаксис:
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}
-
nowrap(по умолчанию): все flex-элементы располагаются в одну строку. -
wrap: все гибкие элементы располагаются в несколько строк в порядке сверху вниз. -
wrap-reverse: все гибкие элементы располагаются в несколько строк в порядке снизу вверх.
Демонстрационная программа:
Просмотрите демонстрационную программу выше, чтобы понять значение различных свойств. Нажмите на демонстрационную область, чтобы запустить или остановить демонстрацию.
2.4 flex-flow
flex-flowсобственностьflex-directionсвойства иflex-wrapСокращение для свойства, по умолчаниюrow nowrap
Основной синтаксис:
.box {
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
}
2.5 justify-content
justify-contentСвойства определяют, как элементы выравниваются по главной оси и как выделяется дополнительное пространство.
Основной синтаксис:
.box {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
-
flex-start(по умолчанию): порядок от линии начальной точки -
flex-end: Порядок относительно финиша -
center: по центру -
space-between: Предметы распределяются равномерно, первый предмет находится на линии старта, а последний предмет на линии финиша. -
space-around: элементы распределены равномерно, каждый элемент имеет одинаковое пустое пространство с обеих сторон, а расстояние между соседними элементами равно сумме пустого пространства между двумя элементами. -
space-evenly: Элементы распределены равномерно, с одинаковым расстоянием между всеми элементами и между элементами и границей.
Демонстрационная программа:
2.6 align-items
align-itemsСвойство определяет выравнивание элементов по поперечной оси.
Основной синтаксис:
.box {
align-items: stretch | flex-start | flex-end | center | baseline;
}
-
stretch(по умолчанию): отображение растянуто в поперечном направлении. -
flex-start: Элементы выровнены по линии начала поперечной оси. -
flex-end: Элементы выровнены по линии конца поперечной оси. -
center: Выравнивание элементов по центру в направлении поперечной оси -
baseline: направление поперечной оси выравнивается по базовой линии первой строки текста.
Демонстрационная программа:
2.7 align-content
align-contentАтрибуты определяют выравнивание и выделение дополнительного пространства в направлении поперечной оси, аналогично главной оси.justify-contentэффект.
Основной синтаксис:
.box {
align-content: stretch | flex-start | flex-end | center | space-between | space-around ;
}
-
stretch(по умолчанию): растянутое отображение -
flex-start: Расположить по порядку от линии начальной точки -
flex-end: Порядок относительно финиша -
center: по центру -
space-between: Предметы распределяются равномерно, первый предмет находится на линии старта, а последний предмет на линии финиша. -
space-around: элементы распределены равномерно, каждый элемент имеет одинаковое пустое пространство с обеих сторон, а расстояние между соседними элементами равно сумме пустого пространства между двумя элементами.
Демонстрационная программа:
3 свойства элемента Flex
3.1 order
По умолчанию элементы Flex располагаются в том порядке, в котором они появляются в коде. тем не мениеorderСвойства могут управлять порядком элементов в контейнере.
Основной синтаксис:
.item {
order: <integer>; /* 缺省 0 */
}
в соответствии сorderЗначения расположены в порядке возрастания, могут быть отрицательными и по умолчанию равны 0.
Демонстрационная программа:
3.2 flex-grow
flex-growСвойство определяет увеличение элемента,flex-growЗначение представляет собой положительное целое число, состоящее из одной единицы, которое представляет масштаб увеличения. По умолчанию 0, то есть если есть лишнее место, оно не будет увеличено, отрицательные значения недействительны.
Если все элементы имеют свойство flex-grow, равное 1, они будут делить оставшееся пространство (если оно есть) поровну. Если один элемент имеет свойство flex-grow, равное 2, а все остальные элементы равны 1, первый займет в два раза больше оставшегося места, чем другие элементы.
Основной синтаксис:
.item {
flex-grow: <number>; /* 缺省 0 */
}
Демонстрационная программа:
3.3 flex-shrink
flex-shrinkСвойство определяет коэффициент уменьшения элемента, по умолчанию равен 1, то есть если места недостаточно, элемент будет уменьшен. 0 означает отсутствие сокращения, отрицательные значения недействительны.
Основной синтаксис:
.item {
flex-shrink: <number>; /* 缺省 1 */
}
Демонстрационная программа:
3.4 flex-basis
flex-basisСвойство определяет размер элемента по умолчанию до выделения дополнительного пространства. Значением атрибута может быть длина (20%, 10rem и т. д.) или ключевое слово.auto. Его значение по умолчанию — auto, что соответствует исходному размеру элемента.
Основной синтаксис:
.item {
flex-basis: <length> | auto; /* 缺省 auto */
}
Демонстрационная программа:
3.5 flex
flexсобственностьflex-grow, flex-shrinkиflex-basisСокращение для , по умолчанию 0 1 авто. Последние два являются необязательными атрибутами.
Основной синтаксис:
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Обычно рекомендуется использовать это сокращение вместо определения каждого свойства по отдельности.
3.6 align-self
align-selfСвойство определяет выравнивание элементов и может переопределять свойство align-items. Значение по умолчанию — auto, что означает наследование свойства align-items родительского элемента.Если родительского элемента нет, это эквивалентно растягиванию.
Основной синтаксис:
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Помимо значения auto,align-selfсвойства и контейнерыalign-itemsСвойства в основном одинаковые.
Демонстрационная программа:
4 Совместимость
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ | 6.1+ | 22+ | 12.1+ | 11+ | 4.4+ | 7.1+ |
Flexbox требует определенных префиксов для поддержки большинства браузеров. Существуют даже совершенно разные имена свойств или значения свойств. Это требуетAutoprefixerИли аналогичная постпроцессорная поддержка CSS, подробности см. в соответствующей документации.