- Адрес столбца:Функции и приложения CSS
- Автор этой статьи:Фронтенд Сяодун
Во-первых, понятие эластичности при изгибе:
Flexbox — это метод одномерной компоновки для размещения элементов в строках или столбцах. Элементы могут расширяться, чтобы заполнить дополнительное пространство, и сжиматься, чтобы соответствовать меньшему пространству. Он работает с любым элементом, если элемент использует гибкую компоновку (далее именуемую: flex layout), он будет формироваться внутриBFC, гибкая верстка поддерживается всеми браузерами, а это значит, что теперь вы можете уверенно и безопасно использовать эту технологию.
Во-вторых, главная ось и поперечная ось:
Чтобы изучить гибкую компоновку, вам необходимо понять понятия «основная ось» и «поперечная ось». Элементы, использующие гибкую компоновку, называются «контейнерами» (flex container), а все ее дочерние элементы являются контейнерными «flex-элементами» (flex). элементы), контейнеры. По умолчанию есть две оси: горизонтальная главная ось (основная ось) и вертикальная поперечная ось (поперечная ось). Начальное положение главной оси (пересечение с границей) называетсяmain start, конечная позиция называетсяmain end; начальное положение поперечной оси называетсяcross start, конечная позиция называетсяcross end.
В-третьих, свойства контейнера
Контейнеры и предметы имеют по 6 свойств, см. рисунок ниже.
3.1 flex-direction
flex-directionСвойство определяет ориентацию главной оси (то есть направление, в котором расположены элементы).
flex-direction: row | row-reverse | column | column-reverse;
-
row(по умолчанию): основная ось горизонтальна, а начальная точка находится на левом конце. -
row-reverse: главная ось находится в горизонтальном направлении, а начальная точка находится в правом конце. -
column: главная ось находится в вертикальном направлении, а начальная точка находится на верхнем краю. -
column-reverse: главная ось вертикальна, а начальная точка находится на нижнем краю.
3.2 flx-wrap
По умолчанию элементы выравниваются по одной строке, независимо от того, задана ли ширина или нет, и автоматически не переносятся:
.main {
width: 500px;
height: 300px;
background: skyblue;
display: flex;
}
.main div {
width: 100px;
height: 100px;
background: pink;
font-size: 20px;
}
Если вам нужно обернуть, вам нужно установить flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse;
-
nowrap(по умолчанию): Не переносить. -
wrap: перевод строки, первая строка вверху. -
wrap-reverse: перевод строки, первая строка внизу.
3.3 flex-flow
flex-flowсобственностьflex-directionсвойства иflex-wrapСокращение для свойства, по умолчаниюrow nowrap
flex-flow: <flex-direction>|| <flex-wrap>;
3.4 justify-content
justify-contentСвойство определяет выравнивание элемента по главной оси
justify-content: flex-start | flex-end | center | space-around | space-between | space-between;
-
flex-start(по умолчанию): по левому краю -
flex-end: выравнивание по правому краю -
center: центр -
space-around: равные интервалы с обеих сторон каждого элемента. -
space-between: Оба конца выровнены с одинаковым интервалом между элементами. -
space-evenly: интервал для каждого элемента равен интервалу между элементом и контейнером.
3.5 align-items
align-itemsСвойство определяет, как элементы выравниваются по поперечной оси.
align-items: flex-start | flex-end | center | baseline | stretch;
-
flex-start: Начальная точка поперечной оси выровнена. -
flex-end: Выровняйте конечную точку поперечной оси. -
center: Выровняйте среднюю точку поперечной оси. -
baseline: Базовое выравнивание первой строки текста элемента. -
stretch(по умолчанию): если элемент не имеет высоты или установлен автоматически, он будет заполнять всю высоту контейнера.
3.6 align-content
align-contentСвойство определяет выравнивание нескольких осей при условии, что необходимо установить flex-wrap: wrap, иначе оно не будет эффективным.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
-
flex-start: Выровнять по начальной точке поперечной оси. -
flex-end: Выровнять по конечной точке поперечной оси. -
center: Выровняйте по средней точке поперечной оси. -
space-between: Выровняйте по обоим концам поперечной оси, и расстояние между осями будет равномерно распределено. -
space-around: Расстояние с обеих сторон каждой оси одинаковое. -
stretch(по умолчанию): ось заполняет всю поперечную ось.
Свойства проекта
4.1 order
orderСвойство определяет порядок сортировки элементов. Чем меньше значение, тем выше рейтинг.Значение по умолчанию равно 0, что может быть отрицательным.
order: <integer>;
4.2 flex-grow
flex-growКакая часть оставшегося пространства во гибком контейнере должна быть выделена для элементов, также известных как правила расширения. Ширина конечного элемента: его собственная ширина + оставшаяся ширина выделения пространства контейнера, максимальное значение flex-grow равно 1, и если оно превышает 1, оно будет расширено на 1.
flex-grow: <number>;
/* default 0 */
4.3 flex-shrink
flex-shrinkСвойство определяет правила сжатия для flex-элементов. Элемент flex сжимается только тогда, когда сумма ширин по умолчанию больше ширины контейнера, а размер сжатия зависит от значения flex-shrink, значение по умолчанию равно 1.
flex-shrink: <number>;
/* default 1 */
По умолчанию ширина первого div равна 200, а ширина второго div равна 300. Сумма этих двух должна превышать 400 родительского элемента, но так как flex-shrink имеет значение 1, оба div сжимаются до родительский элемент.
.item { width: 400px; height: 300px; background: skyblue; display: flex; padding: 5px; }.item div { height: 100px; font-size: 20px;}.item div:nth-child(1) { flex-shrink: 1; width: 200px; background: pink;}.item div:nth-child(2) { flex-shrink: 1; width: 300px; background: cadetblue;}
Если вы установите первый div вflex-shrink: 0; Если он не сжимается, он будет отображаться в соответствии с фактической шириной контейнера.
Как рассчитывается ширина подэлемента после сжатия? На самом деле есть объявление:
-
(200+300)Сумма ширин всех детей -(400)ширина контейнера =(100) - Соотношение ширины первого дочернего элемента:
2/5, отношение ширины второго дочернего элемента:3/5 - Тогда ширина первого дочернего элемента:
200-2/5 * 100= 160, ширина второго потомка:300-3/5 * 100= 240
4.4 flex-basis
flex-basisЗадает начальный размер дочернего элемента в направлении главной оси контейнера, который имеет приоритет над собственной шириной width
flex-basis: 0 | 100% | auto | <length>
Ширина 200, но так как установкаflex-basis: 300px; , поэтому окончательная ширина дочернего элемента больше, чем ширина, установленная им самим
.item { width: 400px; height: 300px; background: skyblue; display: flex; padding: 5px;}.item div { height: 100px; font-size: 20px;}.item div { width: 200px; flex-basis: 300px; background: pink;}
4.5 flex
flexсобственностьflex-grow , flex-shrinkа такжеflex-basisсокращение для , по умолчанию0 1 auto. Последние два свойства являются необязательными.
flex: none | [ <'flex-grow'><'flex-shrink'>? || <'flex-basis'>]
4.6 align-self
align-selfАтрибут позволяет одному элементу иметь выравнивание, отличное от других элементов, может быть переопределеноalign-itemsАтрибуты. По умолчаниюauto, что означает наследование от родительского элементаalign-itemsАтрибуты, если нет родителя, эквивалентныstretch.
align-self: auto | flex-start | flex-end | center | baseline | stretch;
.item { width: 400px; height: 300px; background: skyblue; display: flex; padding: 5px;}.item div { height: 100px; font-size: 20px;}.item div { width: 200px; flex-basis: 300px;}.item div:nth-child(1) { background: pink; align-self: flex-start;} .item div:nth-child(2) { background: violet; align-self: center;} .item div:nth-child(3) { background: greenyellow; align-self: flex-end;}
Пятое, о яме гибкой верстки в браузере IE
несмотря на то чтоflex布局уже получилIE浏览器поддерживается, но некоторые свойства находятся вIE浏览器Это не повлияет на браузер, или эффект несовместим с другими браузерами.Flexbugsможно увидеть вflex布局существуетIE浏览器Подробное описание плохой работы
Вот краткое изложение некоторых, решения можно найти по ссылке
- flex-direction: свойство столбца не действует
- min-height и flex: 1 не поддерживаются
- align-items: переполнение текста по центру и другие проблемы
6. Корпус макета
6.1 Равновысокая компоновка
Содержимое каждого столбца разное, но высота контейнера одинакова.
.item { width: 400px; height: 300px; background: skyblue; display: flex; justify-content: space-between; padding: 5px;}.item div { width: 100px; font-size: 20px; background: pink;}.item div p { text-align: center;}
6.2 Фиксированная ширина слева, адаптивная верстка справа
Общий макет системы TOB, дерево меню слева и содержимое справа
html, body { margin: 0; padding: 0;}.container { display: flex; width: 100%; height: 100vh; background: skyblue;}.left-tree { width: 200px; height: 100%; background: pink;}.main { flex: 1 1 auto;}
6.3 Липкий нижний колонтитул
Нижний колонтитул всегда отображается внизу, независимо от того, сколько контента находится в середине.
html, body { margin: 0; padding: 0;}.container { display: flex; flex-direction: column; width: 100%; height: 100vh;}.header { width: 100%; height: 60px; background: pink;}.main { flex: 1 1 auto; background: skyblue;}.footer { width: 100%; height: 60px; background: pink;}
7. Резюме
flex布局Это один из самых популярных методов компоновки.Преимущество в том, что браузер лучше совместим, низкие затраты на обучение, простота, можно быстро пройтиflex布局Реализовать эффекты макета. Недостатком является то, что по сравнению сgrid网格布局Сказать,flex布局да一维布局, обычно используемый для макета с одной строкой или одним столбцом, если вы хотите получить макет с несколькими строками и несколькими столбцами, рекомендуется использоватьgird网格布局.
Понимание концепции осей имеет решающее значение для изучения гибкой компоновки.flex布局Будет ли написать макет, что-то полупути! Вся в этой статье вводит концепцию вала, контейнера и проекта, сочетая несколько конкретных чехлов на макетах, чтобы объяснить планировку Flex, я надеюсь помочь читателям, спасибо!