Во-первых, концепция макета Flexbox.
Макет Flexbox также называется макетом Flex, макетом гибкого блока. этоЦельЭто обеспечивает более эффективную компоновку, выравнивание и позволяет родительскому элементу распределять зазор между дочерними элементами, даже если размер дочернего элемента неизвестен или динамически изменяется.Главная мысльЭто позволяет родительскому элементу регулировать ширину, высоту и расположение дочерних элементов, чтобы они лучше соответствовали доступному пространству макета. Элементы, настроенные на гибкий макет, могут увеличивать дочерние элементы, чтобы максимально заполнить доступное пространство, а также могут сжимать дочерние элементы, чтобы они не переполнялись.
Гибкий макет больше подходит для мелкомасштабного макета и может реализовать различные макеты страниц простым, полным и отзывчивым образом. Однако после настройки макета Flex дочерние элементыfloat,clearа такжеvertical-alignСвойства будут недействительными. Преимущество гибкой блочной модели Flex заключается в том, что ей нужно только объявить поведение, которое должен иметь макет, без указания конкретного метода реализации. Браузер отвечает за завершение фактического макета. Отдайте приоритет макету flexbox.
Flex layout — это полноценный модуль, включающий полный набор свойств. Элемент, в котором используется макет Flex, называется контейнером Flex, сокращенно «контейнер". Все его дочерние элементы являются элементами контейнера, для краткости называемыми элементами Flex"проект".
Контейнеры по умолчанию имеют две оси:Горизонтальная ось(Главная ось) ивертикальная ось(поперечная ось), по умолчанию элементы располагаются вдоль главной оси (горизонтальной оси):
Здесь задействовано несколько концепций, давайте посмотрим:
- main axis: главная ось родительского элемента Flex относится к оси основного направления макета дочернего элемента.Определяется свойством flex-direction, является ли главная ось горизонтальной или вертикальной.По умолчанию используется горизонтальная ось.
- main-start & main-end: представляет начало и конец главной оси соответственно.Дочерние элементы будут располагаться вдоль главной оси от главного-начала до основного-конца в родительском элементе.
- main size: Один элемент занимает длину главной оси.
- cross axis: поперечная ось, перпендикулярная главной оси.
- cross-start & cross-end: представляют начало и конец поперечной оси соответственно. Расположение дочерних элементов на поперечной оси начинается от перекрестного начала к поперечному концу.
- cross size: размер дочернего элемента в направлении поперечной оси.
Свойства родительского элемента
Чтобы использовать гибкий макет, вам сначала нужно указать гибкий макет для родительского элемента, чтобы элементы в контейнере могли реализовать гибкий макет:
<div class="container"></div>
.container {
display: flex | inline-flex;
}
Есть два способа установить гибкий макет, используйтеdisplay: flex;Будет генерировать блок-контейнер гибкого контейнера, используйтеdisplay: inline-flex;Он генерирует гибкую линию в контейнере. Если мы используем элемент куска, такой как тег div, вы можете использовать flex, если вы используете встроенный элемент, вы можете использовать inline-flex. В большинстве случаев мы будем использоватьdisplay: flex;.
Родительский элемент (контейнер) может устанавливать следующие шесть свойств:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1. flex-direction
flex-direction: направление главной оси, определяющее направление расположения элементов в контейнере, и имеет четыре значения атрибута:
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
(1)flex-direction: row: значение по умолчанию, расположенное слева направо по горизонтальной оси, начальная точка на левом краю
(2)flex-direction: row-reverse: Расположите справа налево вдоль горизонтальной главной оси, начиная с правого края.
(3)flex-direction: column: расположите сверху вниз по вертикальной оси, начальная точка находится на верхнем краю
(4)flex-direction: column-reverse: Расположить снизу вверх по вертикальной оси, начиная с нижнего края
2. flex-wrap
flex-wrap: Может ли элемент в контейнере обернуться, он имеет три значения атрибута:
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
(1)flex-wrap: nowrap: значение по умолчанию, без разрыва строки. Когда длина главной оси фиксирована и места недостаточно, размер элемента будет корректироваться соответствующим образом без переноса.
(2)flex-wrap: wrap: Прогулка, первая линия
(3)flex-wrap: wrap-reverse: новая строка, первая строка ниже
3. flex-flow
flex-flowдаflex-directionсвойства иflex-wrapСокращение для свойства, по умолчанию:flex-flow:row nowrap, не очень полезно, лучше написать отдельно. Свойство записывается в следующем формате:
.container {
flex-flow: <flex-direction> <flex-wrap>;
}
4. justify-content
justify-content: Выравнивание элемента по главной оси, имеет пять значений атрибута:
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
Вот пример с горизонтальным направлением в качестве главной оси, то естьflex-направление: строка.
(1)justify-content : flex-start: значение по умолчанию, элементы находятся на главной осиВыровнять по левому краю(выравнивание по верхнему краю)
(2)justify-content : flex-end: элемент находится на главной осиВыровнять вправо(выравнивание по нижнему краю)
(3)justify-content : center: элемент находится на главной осивыравнивание по центру
(4)justify-content : space-between: элемент находится на главной осиоправданный, элементы расположены на одинаковом расстоянии
(5)justify-content : space-around: равные интервалы с обеих сторон каждого элемента. Таким образом, расстояние между элементами в два раза больше, чем расстояние между элементами и границей.
5. align-items
align-item: Выравнивание элемента по поперечной оси, имеет пять значений атрибута:
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
Вот пример с горизонтальным направлением в качестве главной оси, то естьflex-направление: строка.
(1)align-item：flex-start: Начальная точка поперечной оси выровнена (сверху или слева). Установите высоту контейнера на 100 пикселей и высоту элемента на 20 пикселей, 40 пикселей, 60 пикселей, 80 пикселей и 100 пикселей соответственно. Эффект показан на рисунке:
(2)align-item：flex-end: Конечная точка поперечной оси выровнена (внизу или справа). Установите высоту контейнера на 100 пикселей и высоту элемента на 20 пикселей, 40 пикселей, 60 пикселей, 80 пикселей и 100 пикселей соответственно. Эффект показан на рисунке:
(3)align-item：center: Выровняйте среднюю точку поперечной оси. Установите высоту контейнера на 100 пикселей и высоту элемента на 20 пикселей, 40 пикселей, 60 пикселей, 80 пикселей и 100 пикселей соответственно. Эффект показан на рисунке:
(4)align-item：stretch: значение по умолчанию. Если элемент не имеет высоты или для него задано значение auto, он будет заполнять высоту всего контейнера. Предполагая, что высота контейнера установлена на 100 пикселей, а высота элемента не задана, высота элемента также равна 100 пикселей:
(5)align-item：baseline: Выровнять по базовой линии первой строки текста элемента.
6. align-content
align-content: Выравнивание нескольких осей. Это свойство не действует, если элемент имеет только одну ось. Он имеет шесть значений свойств:
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Как определяется это количество осей? На самом деле, это в основном определяется свойством Flex-Wrap. Когда Flex-Wrap настроен на NOWRAP, есть только одна ось для контейнера, и потому что элемент не охватывает, нет нескольких осей. Когда Flex-Wrap настроен для обертывания, в контейнере могут быть несколько осей, поэтому вам нужно установить выравнивание между несколькими осями.
Вот пример, когда горизонтальное направление является главной осью, а именно: flex-direction: row, flex-wrap: wrap;
(1)align-content: stretch: значение по умолчанию, линия оси занимает всю поперечную ось. Здесь мы сначала устанавливаем для каждого элемента фиксированную ширину, эффект выглядит следующим образом:
Уберем высоту каждого элемента, он будет занимать всю поперечную ось, эффект будет такой:
(2)align-content: flex-start: Заполнение из начального положения поперечной оси
(3)align-content: flex-end: заполнить от конца поперечной оси
(4)align-content: center: Выровнять по средней точке поперечной оси
(5)align-content: space-between: Выровняйте по обоим концам поперечной оси, расстояние до оси равномерно распределено
(6)align-content: space-around: Расстояние с обеих сторон каждой оси одинаковое. Следовательно, расстояние между осями в два раза больше, чем расстояние между осями и рамой.
В-третьих, атрибуты дочернего элемента
Дочерние элементы имеют следующие шесть атрибутов:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
1. order
orderСвойства используются для определения порядка сортировки элементов. Чем меньше значение, тем выше рейтинг, по умолчанию0. Форма использования следующая:
.item {
order: <integer>;
}
2. flex-basis
flex-basisСвойство определяет пространство главной оси, занимаемое элементом, до выделения лишнего пространства.Браузер рассчитает, есть ли на главной оси избыточное пространство в соответствии с этим свойством. Его значение по умолчанию — auto, что соответствует исходному размеру элемента. Форма использования следующая:
.item {
flex-basis: <length> | auto;
}
Когда основная ось установлена горизонтальной, когда установлена flex-basis, установленное значение ширины элемента будет недействительным,flex-basisнужно следоватьflex-growа такжеflex-shrinkИспользуйте вместе, чтобы получить эффект. Есть два специальных значения:
- когда
flex-basisКогда значение равно 0 %, считается, что размер элемента равен 0, поэтому он используется независимо от настройки размера элемента; - когда
flex-basisЕсли установлено значение auto, размер устанавливается в соответствии с установленным значением размера.
3. flex-grow
flex-growСвойство определяет соотношение увеличения элемента, по умолчанию равно 0, то есть, если есть остальное пространство, он не будет увеличен.
Когда все элементы в контейнере имеют установленное свойство flex-basis, если еще осталось место, установитеflex-growсвойства вступят в силу.
- Если для всех элементов свойство flex-grow установлено равным 1, они будут делить оставшееся пространство поровну, как показано на следующем рисунке:
- Если для одного из элементов свойство flex-grow установлено на 2, а для других — на 1, то он занимает в два раза больше оставшегося места, чем другие элементы, как показано на следующем рисунке:
3. flex-shrink
flex-shrinkСвойство определяет коэффициент уменьшения элемента, по умолчанию равен 1, то есть если места недостаточно, элемент будет уменьшен. Отрицательные значения не могут быть установлены, а формы использования следующие:
.item {
flex-shrink: <number>;
}
- Если свойство flex-shrink всех элементов равно 1, при недостатке места они будут пропорционально уменьшены, как показано на следующем рисунке:
- Если элемент атрибута Flex-Shrink составляет 0, 1 или другие элементы, пространство недостаточно, первое не уменьшается, как показано ниже:
5. flex
flexсобственностьflex-grow, flex-shrinkа такжеflex-basisСокращенно для , последние два свойства являются необязательными. Значение по умолчанию:flex:0 1 auto。Форма использования следующая:
.item{
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Есть несколько общих особых случаев для значения flex: (1) Значение по умолчанию: flex: 0 1 auto, то есть когда остается место, только увеличивать, а не уменьшать
.item {
flex:0 1 auto;
}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
(2) flex: нет, то есть, когда остается место, ни увеличивать, ни уменьшать, окончательный размер обычно выражается как максимальная ширина содержимого.
.item {
flex:0 0 auto;
}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
(3) flex: 0, то есть когда остается место, ширина элемента равна ширине его содержимого, а окончательный размер — минимальной ширине содержимого.
.item {
flex:0 1 0%;
}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;
}
(4) flex: auto, то есть размер элемента можно гибко увеличивать или уменьшать, с полной гибкостью, но при недостаточном размере будет отдавать приоритет максимальному увеличению размера содержимого.
.item {
flex:1 1 auto;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
(5) flex: 1, то есть размер элемента можно гибко увеличивать или уменьшать, с полной гибкостью, но при недостаточном размере размер контента будет минимизирован в первую очередь.
.item {
flex:1 1 0%;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
6. align-self
align-selfАтрибут позволяет одному элементу иметь выравнивание, отличное от других элементов, может быть переопределеноalign-itemsАтрибуты. По умолчаниюauto, что означает наследование от родительского элементаalign-itemsатрибут, если нет родительского элемента, он эквивалентенstretch.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Это свойство имеет тот же эффект, что и свойство align-items, за исключением того, что это свойство допустимо только для одного элемента, а align-items — для всех элементов в контейнере.
Задайте для свойства align-items контейнера значение flex-start, а для свойства align-self третьего элемента в контейнере — значение flex-end. Эффект будет следующим:
Основное использование гибкого макета в основном заключается в следующем. Гибкий макет может быть одним из лучших методов макета в настоящее время, но он ограничен мелкомасштабным макетом. Для крупномасштабного макета можно использовать макет сетки. Будет статья о сетке позже.Макет, следите за обновлениями!
Если статья оказалась для вас полезной, поставьте лайк!