задний план
Нам нравится использовать Flexbox для вертикального и горизонтального центрирования, адаптивной ширины контейнера, потому что это действительно удобно. Различные макеты страниц могут быть реализованы просто, полностью и быстро, и в настоящее время они поддерживаются всеми современными браузерами. Но как рассчитываются гибкие свойства?
определение
Flex — это аббревиатура от Flexible Box, что переводится на китайский язык как «гибкая коробка», что используется для обеспечения максимальной гибкости коробчатой модели. Любой контейнер можно указать в качестве макета Flex.
основная концепция
Элементы, использующие макет Flex, называются flex-контейнерами или, для краткости, «контейнерами». Все его дочерние элементы автоматически становятся членами контейнера, называемого элементом Flex (элемент Flex), именуемого «элемент».
По умолчанию в контейнере две оси: главная ось в горизонтальном направлении и поперечная ось в вертикальном направлении.Элементы по умолчанию расположены в соответствии с основными осями. (Поэтому направление макета Flex по умолчанию — строка)
- main start/main end: начальное/конечное положение шпинделя;
- cross start/cross end: начальное/конечное положение поперечной оси;
- основной размер/поперечный размер: один элемент занимает пространство основной/поперечной оси;
Атрибуты
| 6 свойств в контейнере | 6 свойств проекта |
|---|---|
| flex-direction | order |
| flex-wrap | flex-grow |
| flex-flow | flex-shrink |
| justify-content | flex-basis |
| align-items | flex |
| align-content | align-self |
Тема: Как вычисляется flex свойства элемента?
Свойство flex является сокращением для flex-grow, flex-shrink и flex-basis со значением по умолчанию 0 1 auto. Последние два свойства являются необязательными.
Связанные концепции
-
оставшееся место:Когда сумма размеров всех flex-элементов меньше, чем flex-контейнер, flex-контейнер будет иметь избыточное пространство, которое не заполнено, тогда это пространство называется оставшимся пространством flex-контейнера (Positive Free Space).
-
Недостаток места:Когда сумма размеров всех flex-элементов больше, чем flex-контейнер, flex-контейнеру не хватает места для размещения всех flex-элементов, а дополнительное пространство называется отрицательным пространством (отрицательное свободное пространство).
Во-первых, давайте посмотрим, какие значения может устанавливать flex-basis.
/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;
/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* Automatically size based on the flex item’s content */
flex-basis: content;
/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
Свойство flex-basis указывается либо как содержание ключевого слова, либо как . Множество новых значений свойств, похожих на значение свойства ширины.
Давайте еще раз посмотрим на значения ширины, такие как max/min-content, fit-content и fill-available.
описывать
- max-content:Предполагая, что наш контейнер имеет достаточную ширину и достаточно места, в настоящее время занятая ширина — это размер, представленный max-content.
- min-content:Ширина элемента с наибольшим значением минимальной ширины внутреннего элемента используется в качестве ширины конечного контейнера.
- fit-content:Уменьшать до размеров
- fill-available:Автоматически заполнять оставшееся пространство
Эффекты — 1 максимальное содержание
Эффекты — 2 минуты контента
Эффект — 3 фит-контента
Эффекты — 4 доступных заливки
Использование свойств flex-basis
- flex-basis значение по умолчанию — auto
- Если значение ширины flex-элемента задано явно, а flex-basis имеет значение auto, ширина flex-элемента рассчитывается в соответствии с шириной.Если ширина не задана явно, она рассчитывается в соответствии с шириной содержимого элемента. гибкий элемент
- Если flex-элемент явно устанавливает значение ширины и конкретное значение flex-basis, flex-элемент игнорирует значение ширины и вычисляет flex-элемент в соответствии с flex-basis.Когда оставшегося места во flex-контейнере недостаточно, flex-элемент фактическая ширина элемента не рассчитывается в соответствии с flex-basis, и соответствующее пространство выделяется для flex-элемента в соответствии со значениями, установленными flex-grow и flex-shrink
- Если flex-элемент явно устанавливает значение min-width или max-width, когда значение, рассчитанное flex-basis, меньше, чем min-width, ширина flex-элемента устанавливается в соответствии со значением min-width, в противном случае рассчитанное значение больше, чем значение max-width, установите ширину элемента Flex в соответствии со значением max-width
flex-grow
Когда у flex-контейнера остается определенное количество свободного места, flex-grow позволяет flex-элементу выделить оставшееся пространство flex-контейнера, и каждый flex-элемент будет расширяться в соответствии с коэффициентом flex-grow, так что flex-элемент заполняет все пространство. весь гибкий контейнер (эффективно используя оставшееся пространство гибкого контейнера). Когда все flex-элементы имеют одинаковое значение flex-grow, flex-элементы будут равномерно распределять оставшееся пространство flex-контейнера.
flex-shrink
flex-shrink используется для управления коэффициентом масштабирования гибких элементов. Когда сумма ширины всех flex-элементов больше, чем flex-контейнер, контейнер переполнится (когда flex-wrap теперь rap), flex-shrink может выделить недостаточное пространство flex-контейнера в соответствии с числовым соотношением, установленным параметром flex-элемент, то есть в соответствии с коэффициентом пропорциональности Уменьшает собственную ширину, чтобы не переполнять flex-контейнер.
Пример:
Предположение: есть 2 элемента Flex под контейнером Flex шириной 837 пикселей, как показано на рисунке:
Как расти?
// Flex 项目1
height: 100px;
background-color: red;
flex-grow: 5;
flex-shrink: 5;
flex-basis: 200px;
// Flex 项目2
height: 100px;
background-color: blue;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
расчет роста:
容器 宽度 837px - flex-basis[1] - flex-basis[2] > 0 即 有剩余空间
剩余空间 = 容器 宽度 837px - flex-basis[1] - flex-basis[2] = 837px - 200px -200px = 437px
flex-grow 发挥作用如下：
flex-grow [1] * x + flex-grow[2] * x = 437px
5x + 1x = 437
x= 72.83px
所以
Flex 项目1 的总宽度 = flex-basis[1] + flex-grow[1] * x = 200px + 72.83px * 5 = 564.17px
Flex 项目2 的总宽度 = flex-basis[2] + flex-grow[2] * x = 200px + 72.83px * 1 = 272.83px
Как уменьшить?
// Flex 项目1
height: 100px;
background-color: red;
flex-grow: 5;
flex-shrink: 5;
flex-basis: 800px;
// Flex 项目2
height: 100px;
background-color: blue;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 800px;
Расчет усадки:
容器 宽度 837px - flex-basis[1] - flex-basis[2] < 0 即 有不足空间
不足空间 = 容器 宽度 837px - flex-basis[1] - flex-basis[2] = 837px - 800px -800px = -763px
flex-shrink 发挥作用如下：
flex-shrink [1] * x + flex-shrink[2] * x = 763px
5x + 1x = 763px
x = 127.17px
所以
Flex 项目1 的总宽度 = flex-basis[1] - flex-shrink[1] * x = 800px - 127.17px * 5 = 164.17px
Flex 项目2 的总宽度 = flex-basis[2] + flex-shrink[2] * x = 800px - 127.17px * 1 = 672.83px
гибкий алгоритм увеличения и уменьшения
Суммировать
Я надеюсь, что эта статья поможет вам лучше понять, как рассчитываются свойства Flex. Наконец, используйте четкую картинку, чтобы сделать резюме.
насчет нас
Передовая команда Kuaigou Taxi занимается обменом передовыми технологиями и регулярно публикует высококачественные статьи. Добро пожаловать, обратите внимание и лайкните.
Ссылка на ссылку:
[1]: Woohoo. Я 3 с prussian.com/CSS/flex-IT…
[2]: IT и LP.IT home.com Тайвань/статьи/10…