Неизвестные детали в макете Flexbox

Добавить Автора

Макет флексбоксаВ настоящее время это один из самых популярных методов веб-макета, который обеспечивает большую гибкость и удобство для веб-разработчиков при завершении макета пользовательского интерфейса страниц или компонентов. Но также из-за его большой гибкости он скрывает некоторые неизвестные детали.Если вы не очень хорошо знакомы с Flexbox или не знаете его спецификаций, многие детали будут упущены, и эти детали заставят вас запутаться в том, что вы используете, и это может даже вызвать некоторые проблемы.

на этот раз вОптимизация макета Flexbox imgcookКогда я перечитал спецификацию Flexbox, я обнаружил, что упустил из виду важную информацию. По этой причине в этой статье я объединил макет Flexbox, режим написания CSS, логические свойства и выравнивание для организации заметки, надеясь помочь учащимся, которые хотят понять или испытать трудности при использовании Flexbox.

некоторые термины и понятия

Терминология флексбокса

Унификация терминологии помогает нам лучше обсуждать и решать проблемы позже. Используйте следующую диаграмму для описания терминов во Flexbox:

Главная ось и боковая ось имеют такое понятие только в системе компоновки Flexbox, а не горизонтальное направление всегда является главной осью (Main Axis), а вертикальное направление всегда является боковой осью (Cross Axis). Flexbox не влияет на основную и боковую оси.flex-directionПомимо влияния значения, на него также повлияет режим записи CSS.writing-modeиdirectionи HTMLdirВлияние атрибутов!

Блочная ось и встроенная ось

Модуль CSS Box Alignment Level 3 представляет две новые концепции: ось блока иВстроенная ось :

ось блоканаходится рядомблокировать(например, элемент абзаца) ось, проходящая в направлении компоновки,он будет пересекать встроенную ось вертикально
Встроенный вал— это ось вдоль направления потока слов в предложении при использовании того или иного режима письма. Например, для английского или китайскогоВстроенные оси горизонтальны

в то же времяБлочная ось (Block Axis) часто называется Column (Колонка), Inline Axis (Встроенная ось) также часто называется Row (Ряд):

Хотя спецификация Flexbox и спецификация Grid пока имеют свои описания выравнивания, выравнивание в CSS будет закрыто для модуля Box Alignment, на будущее описание оси будет более "ось блока" и "Встроенная ось", в сочетании с макетом Flexbox, соответствующее отношение оси:

Встроенная ось также выровнена с основной осью во Flexbox.
Ось блока также выровнена с поперечной осью во Flexbox.

Ось блока и встроенная ось также зависят от режима записи CSS. writing-modeиdirectionи HTMLdirимущественные эффекты. Однако в макете Flexbox на него также влияетflex-directionэффекты свойства.

режим записи

в спецификации CSS Write Modes Level 3writing-modeиdirectionа такжев HTML dirАтрибутыОн влияет как на основную, так и на боковую оси во Flexbox и меняет направление основной и боковой осей.

логическое свойство

ось блока,Встроенный вал,режим записиПосле появленияНачало блока, конец блока, встроенное начало и встроенный конец:

При размещении в макете Flexbox:

Встроенный стартЭквивалент макета FlexboxОсновной старт
Встроенный конецЭквивалент макета FlexboxГлавный конец (Главный конец)
Заблокировать запускЭквивалент макета FlexboxКросс-старт
Конец блокаЭквивалент макета FlexboxКросс-Энд

В то же время была введена спецификация CSS Logical Properties and Values Level 1.block-start,block-end,inline-startиinline-end, но они такие же, как и во Flexbox, Grid in Box Alignmentflex-start,start,flex-endиendне эквивалентны и не являются понятиями в одной и той же области. Эти свойства соответствуют физическим свойствамtop,right,bottomиleft:

То есть после введения логических свойств CSS блочная модель CSS будет разделена нафизическая модель коробкиимодель логического ящика :

С тех пор свойства CSS такжелогическое свойствоифизические свойстваточки:

Обратите внимание, что на логические свойства CSS также влияет режим записи CSS.writing-mode,directioinатрибуты и HTMLdirАтрибуты влияют и различаются при разных комбинациях:

Свободное место (свободное место) и недостаточно места

В модуле макета Flexbox контейнер flex может содержать один или несколько flex-элементов. А flex-контейнер и flex-элемент имеют свой размер, поэтому будут ситуации, когда сумма размеров flex-элемента больше или меньше, чем flex-контейнера:

Когда сумма размеров всех flex-элементов меньше, чем flex-контейнер, flex-контейнер будет иметь избыточное пространство, которое не заполнено, тогда это пространство называется оставшимся пространством flex-контейнера (Positive Free Space).
Когда сумма размеров всех flex-элементов больше, чем flex-контейнер, flex-контейнеру не хватает места для размещения всех flex-элементов (flex-элементы переполнят flex-контейнер), а дополнительное пространство называется Negative Free. Пространство, также известное как негативное пространство

Flex-контейнеры и Flex-элементы

использовать на элементахdisplayустановить значение наflexилиinline-flex, контейнер станет контейнером Flex, а подэлементы внутри контейнера, включая текстовые узлы, — псевдоэлементами.

использоватьflexиinline-flexКонкретная сцена:

Если элемент явно устанавливаетdisplayзначениеflexилиinline-flex, Flex-элементы явно не задают свойства, связанные с размером, Flex-элементы будут основываться на размере своего содержимого для расчета собственного размера.

Установить какdisplay: flex, когда у гибкого контейнера нет явно установленных свойств, связанных с шириной, его ширина равна его родительскому контейнеру (эквивалентноwidth: 100%)
Установить какdisplay: inline-flexКогда flex-контейнер не имеет явно установленных свойств, связанных с шириной, его ширина равна ширине всех flex-элементов и

Когда все flex-элементы во flex-контейнере все шире и больше, чем flex-контейнер:

Установить какdisplay: flexflex-элементы переполняют flex-контейнер, когда
Установить какdisplay: inline-flexКогда flex-элемент расширяет flex-контейнер, это может привести к тому, что flex-контейнер переполнит родительский элемент (или элемент-предок).

использоватьdisplay: inline-flexлучшее сочетаниеmin-widthиmin-heightиспользовать вместе. Явная установка не рекомендуетсяwidthиheight.

displayУстановить какflex, контейнер Flex аналогичен контейнеру блока по выражению, фактически это контейнер Flex, а формат контекста — FFC (Flexbox Formatting Content), поэтому некоторые свойства макета, примененные к контейнеру блока (Block Formatting Content), больше не применимо, например:

CSScolumn-*Свойство не работает на гибком контейнере
CSSfloatиclearСвойства не работают с элементами Flex и не исключают элементы Flex из потока документов.
CSSvertical-alignСвойства, не работающие с гибкими элементами
Псевдоэлементы CSS::first-lineи::first-letterНе работает с flex-контейнерами, а flex-контейнеры не обеспечивают форматирование первой строки или первой буквы для своих предков.

Одно замечание,если элемент displayзначениеinline-flex, и элемент явно устанавливаетfloatилиpositionзначениеrelative,absoluteилиfixed,ТакdisplayРасчетное значениеflex, т. е. производительность контейнера Flex иdisplay: flexэквивалент.

Работа со свойствами в flex-контейнерах

Укажите направление шпинделя

Явное использование в контейнерах Flexflex-directionНаправление главной оси можно указать, если оно не задано явноflex-directionсвойство, контейнер Flex примет значение по умолчаниюrow.

На картинке выше показано только как читатьLTR (слева направо), если нет специального объявления, следующие документы не будут затронуты способом чтения (т.е. CSS writing-mode,directionи HTMLdirАтрибуты), чтобы перечислить различные схемы.

Если вам не нужно явно изменять направление основной оси, вам нужно явно установить его в контейнере flex.flex-directioin, например метод набора текста, как показано ниже:

flex-direction: column

row-reverseи значение по умолчаниюrowПроизводительность прямо противоположная, подходит для следующих сценариев компоновки:

В макете Flexboxflex-directionПри указании направления главной оси flex-контейнера это также влияет на порядок расположения flex-элементов (Это очень удобно, когда вы хотите добиться обратного набора текста без изменения структуры DOM.). Кромеflex-directionЯвное использование во гибких элементах может использоваться в дополнение к влиянию на порядок гибких элементов.orderАтрибуты также могут быть упорядочены по вашему желанию, не затрагивая структуру DOM.

В настоящее время при использовании макета Flexbox в imgcook он явно задается для контейнера Flex.flex-directionзначение, даже значение по умолчанию:row. При оптимизации алгоритма компоновки соответствующую обработку можно сделать, только в не-rowявно установлен на гибком контейнереflex-direction:

Управляет переносом гибких элементов (гибкая линия)

использоватьflex-wrapВы можете контролировать, как flex-элементы оборачивают flex-контейнер:

Устанавливайте только в том случае, если сумма ширин всех flex-элементов больше, чем размер основной оси flex-контейнера.flex-wrapсвойства вступят в силу.

flex-wrapзначение неnowrap(которыйwrapиwrap-reverse) может сделать так, чтобы flex-элементы переносились (столбцы) явно, гдеwrap-reverseисполнительское поведение иwrapКак раз наоборот.

Комбинированный эффект

эффект производительности

Эффект 1

Эффект 2

Эффект 3

Эффект 4

Эффект 5

Эффект 6

Эффект 7

Эффект 8

flex-directionиflex-wrapможно сократить какflex-flow.flex-flowПри использовании можно явно задать только одно значение, а можно явно задать два значения:

flex-flowЯвно задано только одно значение, и это значение и<flex-direction>при совпадении,flex-wrapпримет значениеinitial
flex-flowЯвно задано только одно значение, и это значение и<flex-wrap>при совпадении,flex-directionпримет значениеinitial
flex-flowПри явной установке двух значенийflex-directionиflow-wrapНет порядка старшинства, простоflex-flow: column wrapиflex-flow: wrap columnэквивалент

Выравнивание направления шпинделя

Использование в контейнере Flexjustify-contentДля управления выравниванием гибких элементов в направлении основной оси гибкого контейнера, а также может использоваться для выделения оставшегося пространства в направлении основной оси гибкого контейнера. использоватьjustify-contentВыделение оставшегося пространства flex-контейнера в основном предназначено для выделения оставшегося пространства двум сторонам flex-элемента в соответствии с различными методами выравнивания, то есть для управления расстоянием между flex-элементом и flex-элементом.

justify-contentЕсть две спецификации:

CSS Flexible Box Layout Module Level 1
CSS Box Alignment Module Level 3

В модуле макета Flexbox,justify-contentЕсть только следующие шесть значений:

требует вниманияspace-between,space-aroundиspace-evenlyРазница между тремя:

space-betweenЭто приведет к тому, что начальный край блока первого гибкого элемента выровняется с начальной точкой основной оси гибкого контейнера, край конца блока последнего гибкого элемента будет выровнен с конечной точкой основной оси гибкого контейнера, а расстояние между другими соседними гибкими элементами равно . Когда во flex-контейнере есть только один flex-элемент, его поведение иflex-startэквивалент
space-aroundСделает расстояние между начальным краем первого гибкого элемента и началом основной оси гибкого контейнера, а также конечным краем последнего гибкого элемента и главной осью гибкого контейнера, чтобы они были одинаковыми и равными половине расстояния между двумя другими соседними гибкие элементы. Когда во flex-контейнере есть только один flex-элемент, его поведение иcenterэквивалент
space-evenlyРасстояние между начальным краем блока первого гибкого элемента и началом основной оси гибкого контейнера, а также конечным краем поля последнего гибкого элемента и главной осью гибкого контейнера будет одинаковым и равным расстоянию между двумя другими соседними гибкими элементами. Предметы. Когда во flex-контейнере есть только один flex-элемент, его поведение иcenterэквивалент

Если во гибком контейнере нет дополнительного оставшегося места или оставшееся пространство отрицательное,justify-contentПредставление значения:

flex-startДелает flex-элементы переполненными в конце основной оси flex-контейнера.
flex-endДелает flex-элементы переполненными в начале главной оси flex-контейнера.
centerДелает flex-элементы переполненными на обоих концах flex-контейнера
space-betweenиflex-startтакой же
space-aroundиcenterтакой же
space-evenlyиcenterтакой же

В макете flexbox вы можете использовать эти свойства для управления оставшимся пространством контейнера flex, например:

Выравнивание боковой оси

Использование в контейнере Flexboxalign-itemsдля управления выравниванием гибких элементов в направлении боковой оси.

align-itemsЗначение по умолчаниюstretch, но только гибкие элементы показывают явные настройкиheight(илиwidth), элемент flex будет растянут, чтобы заполнить весь flex-контейнер.

Если во флекс-контейнере нет свободного места или оставшееся пространство отрицательное:

flex-startДелает flex-элементы переполненными в конце боковой оси flex-контейнера
flex-endДелает flex-элементы переполненными в начале боковой оси flex-контейнера.
centerДелает flex-элементы переполненными по обеим сторонам боковой оси flex-контейнера
baselineСделает flex-элементы переполненными в конце боковой оси flex-контейнера, что-то вродеflex-start

Выравнивание нескольких строк (столбцов)

align-contentРаботает только тогда, когда в flex-контейнерах недостаточно места (сумма всех ширин flex-элементов больше, чем размер основной оси flex-контейнера), и явно заданоflex-wrapзначение неwrapВремя.

align-contentведет себя несколько похоже наjustify-cotentУправляет выравниванием flex-элементов в направлении основной оси (выделяет оставшееся пространство на главной оси flex-контейнера), в то время какalign-contentЕго можно использовать для управления выравниванием строк по боковой оси flex-контейнера в многострочном состоянии (выделить оставшееся пространство боковой оси flex-контейнера). можно поставитьalign-contentВся строка на боковой оси в состоянии рассматривается какjustify-contentОдин гибкий элемент в состоянии.

align-contentЕсть еще одно отличие, еще одноstretchценность. Когда сумма размеров всех строк во флекс-контейнере больше, чем размер боковой оси флекс-контейнера (боковая ось флекс-контейнера не имеет свободного места или свободное пространство отрицательное), значения вести себя следующим образом:

flex-startсделает строку flex-контейнера переполненной в конечной точке боковой оси
flex-endсделает строку flex-контейнера переполненной в начале боковой оси
centerприведет к переполнению строки гибкого контейнера на обоих концах боковой оси
stretchведет себя аналогичноflex-start
space-aroundведет себя аналогичноcenter
space-betweenведет себя аналогичноflex-start
space-evenlyведет себя аналогичноcenter

Интервал (ряд-к-ряду, столбец-столбец)

gapИспользуется для управления расстоянием между элементами гибкости, но игнорирует расстояние между элементами гибкости и краями контейнера гибкости:

Свойства, применяемые к элементам Flex

Самовыравнивание элементов Flex

Доступно в контейнерах Flexjustify-content,align-contentа такжеalign-itemsВыделите пространство для основной и боковой осей flex-контейнера (управляет выравниванием всех flex-элементов в flex-контейнере). Если вам нужно иметь дело с индивидуальным выравниванием гибких элементов, вы можете использоватьalign-self:

align-selfЭффект от принятия разных значений:

Flex проекта align-selfЯвно установите значениеautoне перезаписывает flex-контейнерalign-items;Также, если явно установлено для гибкого элементаmarginзначениеautoКогда элемент Flexalign-selfзначение будет недействительным.

Сценарии, подобные приведенному выше,align-selfЭто очень практично.

Гибкая сортировка элементов

Использование в контейнере Flexflex-directionВсе flex-элементы во flex-контейнере можно нажимать "LTR", "RTL", "TTB" или "BTT«Ориентация.

LTR:flex-driection: row
RTL:flex-direction: row-reverse
TTB : flex-direction: column
BTT : flex-direction: column-reverse

Для элементов Flex вы также можете использоватьorderУкажите конкретное значение, чтобы сортировать элементы Flex без изменения структуры DOM. Чем больше значение, тем больше назад:

В некоторых случаях, когда порядок слева и справа, сверху и снизу меняется на противоположный, за исключениемflex-directionКроме того, вы также можете установить проект Flexorder:

Расчет масштабирования гибкого проекта

Используется в проектах FlexflexСвойство может масштабироваться в соответствии с доступным пространством контейнера Flex, который содержит три подсвойства:flex-basis,flex-shrinkиflex-grow. Эти свойства имеют свои начальные значения:

flex-growНачальное значение0
flex-shrinkНачальное значение1
flex-basisНачальное значениеauto

которыйflexТри подсвойства :flex-grow(коэффициент расширения),flex-shrink(коэффициент усадки) иflex-basis(эталон масштабирования). Эти три свойства могут управлять элементами Flex, и конкретная производительность выглядит следующим образом:

flex-grow: Установите коэффициент расширения элемента Flex, пусть элемент Flex получит (расширит) сколько оставшегося пространства контейнера Flex (Positive Free Space), то есть элемент Flex может стать больше
flex-shrink: установите коэффициент сжатия гибкого элемента, чтобы гибкий элемент минус недостаточное пространство гибкого контейнера (отрицательное свободное пространство), то есть гибкий элемент может стать меньше.
flex-basis: Размер гибкого элемента перед его расширением или сжатием, то есть указывает начальный размер гибкого элемента в направлении главной оси.

flexсвойства могут быть указаны1 значение (синтаксис с одним значением),2 значения (синтаксис с двумя значениями)или3 значения (синтаксис с тремя значениями).

Синтаксис с одним значением: значение должно быть одним из следующих:

безразмерное число (<number>),Напримерflex: 1, на этот раз он будет рассматриваться как<flex-grow>значение
допустимая ширина (width) значение, такое какflex: 30vw, на этот раз он будет рассматриваться как<flex-basis>значение
Ключевые словаnone,autoилиinitial(т.е. начальное значение)

Синтаксис двойного значения: первое значение должно быть безразмерным числом, и оно будет рассматриваться как<flex-grow>значение; второе значение должно быть одним из следующих:

безразмерное число (<number>), он будет рассматриваться как<flex-shrink>значение
допустимая ширина (width) значение, оно будет рассматриваться как<flex-basis>значение

Трехзначный синтаксис:

Первое значение должно быть безразмерным числом (<number>), и он будет рассматриваться как<flex-grow>значение
Второе значение должно быть безразмерным числом (<number>), и он будет рассматриваться как<flex-shrink>значение
Третье значение должно быть допустимой шириной (width) значение, и оно будет рассматриваться как<flex-basis>значение

flexСтоимость имущества может быть:

auto: гибкие элементы будутwidthиheightчтобы определить размер, но гибкий элемент расширяется и сжимается в соответствии с оставшимся пространством гибкого контейнера. что эквивалентноflex: 1 1 auto
initial: гибкие элементы будутwidthиheightдля установки размера. Он укорачивается, чтобы соответствовать гибкому контейнеру, но не растягивается и не поглощает дополнительное оставшееся пространство в гибком контейнере, чтобы соответствовать гибкому контейнеру. что эквивалентноflex: 0 1 auto
none: гибкие элементы будутwidthиheightдля установки размера. Он совершенно неэластичен (не укорачивается и не растягивается, чтобы соответствовать гибкому контейнеру). что эквивалентноflex: 0 0 auto
<flex-grow>: определяет элемент Flexflex-growсвойство, значение<number>
<flex-shrink>: определяет элемент Flexflex-shrinkсвойство, значение<number>
<flex-basis>: определяет элемент Flexflex-basisАтрибуты.Если значение 0, единицы должны быть добавлены, чтобы не считаться эластичным

flex-grow расчет

flex-growФормула расчета:

Пример:

Предполагая, что в контейнере flex есть четыре flex-элемента, конкретные параметры:

Ширина гибкого контейнера80vw
В контейнере flex есть четыре flex-элемента, и ширина каждого flex-элемента равна10vw
Сумма ширин flex-элементов равна10vw x 4 = 40vw
Оставшееся пространство гибкого контейнера80vw - 40vw = 40vw
Flex проектаflex-growЗначения0,1,2и3, для всех гибких элементовflex-growСумма0 + 1 + 2 + 3 = 6

процесс расчета:

Расчетный результат:

flex-growЗначение также может бытьдесятичное значение. Если приведенный выше примерflex-growЗначения заменены на0,0.1,0.2и0.3,В настоящее времяflex-growСумма (всех гибких элементовflex-growи является0.6, что меньше1. В настоящее время проект Flex также будет основан наflex-growФактор роста используется для разделения оставшегося пространства flex-контейнера, и ширина самого flex-контейнера станет больше, но оставшееся пространство flex-контейнера не будет разделено полностью, потому что всеflex-growи меньше чем1. В этом примере делится только оставшаяся ширина пространства гибкого контейнера.60%.

еслиflex-growи меньше чем1, формула его расчета выглядит следующим образом:

Даже если все flex-элементы во flex-контейнере имеютflex-growи больше, чем1, но нельзя однозначно сказать, что элементы Flex могутflex-growСоотношение для разделения оставшегося пространства гибкого контейнера. Поскольку на размер элемента влияетmax-widthВлияние.Когда flex-элемент задан явно max-widthзначение, когда гибкий элемент основан наflex-growРасчетная ширина большеmax-width, элемент Flex будет нажиматьmax-widthзначение. Например, в предыдущем примере мы установилиmax-widthзначение18vw, процесс расчета и результаты следующие:

В это время оставшееся пространство контейнера Flex не используется.40vw - 0vw - 6.667vw - 8vw - 8vw = 17.333vw, т.е. flex-контейнер также имеет17.333vwоставшееся пространство.

Если элемент Flex не задает явным образом свойства, связанные с шириной (включаяflex-basis),Такflex-growПри расчете гибкие элементы рассчитываются по ширине их содержимого.

Из приведенного выше рисунка вы можете получить:

Ширина гибкого контейнера804px
Ширина flex-элементов43.36px,92.09px,140.83pxи189.56px, сумма ширины всех гибких элементов равна465.84px
Оставшаяся ширина гибкого контейнера равна804px - 465.84px = 338.16px
всех элементов Flexflex-growзначение1, то есть все элементы Flexflex-growСумма4

применить соответствующее значение кflex-growПо формуле можно получить:

Обратите внимание, что разные браузеры по-разному обрабатывают десятичные дроби.

расчет гибкости и усадки

flex-shrinkФормула расчета:

Пример:

Предполагая, что flex-контейнер имеет четыре flex-элемента, конкретные параметры будут следующими:

Ширина гибкого контейнера40vw
В контейнере flex есть четыре flex-элемента, и ширина каждого flex-элемента равна15vw
Сумма ширин flex-элементов равна15vw x 4 = 60vw
Недостаточно места для гибкого контейнера40vw - 60vw = -20vw
Flex проектаflex-shrinkЗначения0,1,2и3, для всех гибких элементовflex-shrinkСумма0 + 1 + 2 + 3 = 6

процесс расчета:

Расчетный результат:

flex-shrinkРасчет также можно рассчитать и по другой формуле:

flex-shrinkиflex-growТочно так же можно брать и десятичные значения. Если все flex-элементы в flex-контейнере имеютflex-shrinkсумма меньше чем1, тогда недостаточное пространство гибкого контейнера не будет разделено гибким элементом в соответствии с коэффициентом сжатия, и гибкий элемент все равно будет переполнять гибкий контейнер.

flex-shrinkсумма меньше чем1, формула его расчета выглядит следующим образом:

На основе приведенного выше примера поместите элемент Flexflex-shrinkсоответственно установлен на0,0.1,0.2и0.3, процесс расчета выглядит следующим образом:

Даже если все flex-элементы во flex-контейнере имеютflex-shrinkи больше, чем1, но нельзя однозначно сказать, что элементы Flex могутflex-shrinkСоотношение, чтобы разделить недостаточное пространство гибкого контейнера. Поскольку на размер элемента влияетmin-widthВлияние.Когда flex-элемент задан явно min-widthзначение, когда гибкий элемент основан наflex-shrinkРасчетная ширина меньшеmin-width, элемент Flex будет нажиматьmin-widthзначение. Например, в предыдущем примере мы установилиmin-widthзначение10vw, процесс расчета и результаты следующие:

В этом случае окончательная сумма ширин flex-элементов все равно будет больше ширины flex-контейнера, и flex-элементы также переполнят flex-контейнер.

flex-shrinkиflex-growСуществует также сходство, то есть, когда свойства, связанные с шириной, не заданы явно для flex-элемента flex-контейнера, начальная ширина flex-элемента будет рассчитываться на основе ширины его содержимого.

flex-shrinkнемного иflex-growСовершенно по-другому, если следует гибкий элементflex-shrinkРасчетная новая ширина имеет тенденцию быть0, элемент Flex будет следовать за элементомmin-contentШирина задается размером, и эта ширина будет передана другим гибким элементам, а затем сжата в соответствии с соответствующим коэффициентом сжатия.

Например, мы помещаем четвертый элемент Flexflex-shrinkзначение от3изменить на9. Согласно формуле, представленной выше, можно узнать, что новая ширина flex-элемента 4 равна15vw - (20vw ÷ 12) × 9 = 0

Расчетная ширина0, но на самом деле отображаемая в это время ширина равна ширине элементаmin-content(Этот пример представляет собой ширину слова «усадить», как показано ниже), примерно47.95px(записаться на прием3.66vw). то это значение будет разделено на3копий (потому что пример трех других flex-элементовflex-shrinkда0,1и2), и соответствующий flex-элемент продолжает выделять ширину, которую должен был уменьшить flex-элемент 4. который:

flex item 1 новая ширина равна15vw - 20 ÷ 12 × 0 - 3.66 ÷ 3 × 0 = 15vw(записаться на прием196.5px )
flex item 2 новая ширина равна15vw - 20 ÷ 12 × 1 - 3.66 ÷ 3 × 1 = 12.113vw(записаться на прием158.6847px )
flex item 3 новая ширина равна15vw - 20 ÷ 12 × 2 - 3.66 ÷ 3 × 2 = 9.227vw(записаться на прием120.869px )

Ширина окна браузера1310pxРезультат, отображаемый в состоянии, выглядит следующим образом:

В модуле макета Flexbox, на основе вышеупомянутых свойств выравнивания контейнера Flex,flex-shrinkиflex-growМы можем очень хорошо справиться с оставшимся и недостаточным пространством гибкого контейнера:

Во гибком контейнере осталось место (сумма ширин всех гибких элементов меньше ширины гибкого контейнера), если установленоflex-grow, гибкий элемент будет выделять оставшееся пространство гибкого контейнера в соответствии с коэффициентом расширения;flex-growКогда выравнивание установлено во flex-контейнере, если это так, оставшееся пространство flex-контейнера будет выделено в соответствии с выравниванием, если нет, то оставшееся пространство flex-контейнера останется неизменным.
Во гибком контейнере недостаточно места (сумма ширин всех гибких элементов больше ширины гибкого контейнера), если установленоflex-shrinkзначение0, flex-элементы не сжимаются, flex-элементы переполняют flex-контейнер; если это не указано явноflex-shrinkзначение, flex-элементы распределяются равномерно, если во flex-контейнере не хватает места, flex-элемент станет уже (т.flex-shrinkЗначение по умолчанию1), если явно заданоflex-shrinkзначение не0, тогда flex-элемент будет выделять недостаточно места во flex-контейнере в соответствии с различными коэффициентами сжатия, и flex-элемент также станет уже.

В частности, мы можем нарисовать блок-схему в этом отношении:

гибкий расчет

flex-basisрассчитывается относительноflex-growиflex-shrinkНемного сложнее, потому что это то же самое, что и проект Flex.Содержание,width,min-widthиmax-widthотносятся к. Отношение здесь относится котношение веса между ними, вообще говоря,Когда эти свойства появляются во гибком элементе одновременно, кто определяет ширину гибкого элемента?.

В макете Flexbox вы можете использоватьflex-basisдля инициализации размера элемента Flex, т.е.Инициализировать размер гибкого элемента до того, как произойдет выделение пространства гибкого контейнера (оставшегося или недостаточного).

На самом деле существует неявная формула для установки размера flex-элементов в модуле макета Flexbox:

content➜width➜flex-basis

Проще говоря, если flex-элемент явно не указанflex-basisзначение, тоflex-basisвернется кwidth(илиinline-size) атрибут; если явно не указаноwidth(илиinline-size) значение свойства, тоflex-basisВернется к расчету ширины на основе содержимого гибкого элемента. Однако на определение размера элемента Flex также влияетflex-growиflex-shrinkИ влияние размера гибкого контейнера. иОкончательный размер элемента Flex будет зависеть от min-width,max-width(илиmin-inline-size,max-inline-size) предел атрибута. Это необходимо отметить.

Давайте посмотрим пример:

<div class="flex__container">
    <div class="flex__item"></div>
    <div class="flex__item"></div>
    <div class="flex__item"></div>
    <div class="flex__item"></div>
</div>



.flex__container {
    width: 600px;
    display: flex;

    border: 1px dashed #f36;
    align-items: stretch;
}

Элементы Flex не задают явно никаких свойств, связанных с размером, просто используйте contentраспространять гибкий проект.

<div class="flex__container">
    <div class="flex__item">Lorem ipsum dolor sit amet</div>
    <div class="flex__item">Lorem ipsum dolor sit amet consectetur adipisicing elit</div>
    <div class="flex__item">Fugiat dolor nihil saepe. Nobis nihil minus similique hic quas mollitia.</div>
    <div class="flex__item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias consequuntur sequi suscipit iure fuga ea!</div>
</div>

В этом примере нет явной настройки для элемента Flex.flex-basisсвойства, в настоящее времяflex-basisпримет значение по умолчаниюauto:

Явно задано для элементов Flex widthценность.

:root { 
  --width: 120px; 
} 

.flex__item { 
  width: var(--width); 
}

На данный момент все flex-элементы имеют одинаковую ширину:

рассчитывается браузеромflex-basisзначение по-прежнемуauto, но явно установленоwidth: 120px, наконец-тоwidthЗначение свойства определяет размер гибкого элемента.

Явно задано для элементов Flex flex-basisзначение, т. е. flex-элемент имеет обаwidthиflex-basisценность.

:root {
    --width: 120px;
    --flexBasis: 150px;
}

.flex__container {
    width: 800px;
}

.flex__item {
    width: var(--width);
    flex-basis: var(--flexBasis);
}

Хотя явно задано при этом в элементе Flexwidthиflex-basis, но окончательный размер гибкого элемента занимаетflex-basisЗначение:

Влияние на размер flex-элемента в модуле макета flexbox должно основываться на его неявной формуле (т.е.content➜width➜flex-basis) судить.Если вы хотите явно установить размер гибкого элемента, лучше всего использовать flex-basis, вместоwidth(илиinline-size).

И последнее, но не менее важное: не забывайте:

использовать flex-basisполучитmin-widthиmax-width(или в логических свойствахmin-inline-sizeилиmax-inline-size)ограничения.

В CSS, если элементы появляются одновременноwidth,min-widthиmax-widthатрибут, его вес вычисляется по следующим правилам:

элементальwidthбольше, чемmax-width, элементыwidthравныйmax-width,Сейчасmax-widthможет покрытьwidth(max-widthвыиграть)
элементальwidthменьше, чемmin-width, элементыwidthравныйmin-width,Сейчасmin-widthможет покрытьwidth(min-widthвыиграть)
когдаmin-widthбольше, чемmax-widthчас,min-widthприоритет будет выше, чемmax-width(min-width выиграть)

Если гибкие элементы появляются одновременноwidth,flex-basisиmin-widthКонкретный процесс работы выглядит следующим образом:

По правилу:content➜width➜flex-basis, чтобы определить значение, применяемое к элементу Flex, то естьflex-basisбудет применяться к проектам Flex (flex-basisвыиграть)
Тогда по закону: Flex проектаwidthменьше, чемmin-widthКогда элемент Flexwidthравныйmin-width,Сейчасmin-widthможет покрытьwidth(min-widthвыиграть)

Таким образом,если flex-basisменьше, чемmin-width, ширина гибкого элемента будет принимать значениеmin-width,Сейчасmin-widthобложкаflex-basis(min-widthвыиграть).

Если гибкие элементы появляются одновременноwidth,flex-basisиmax-widthКонкретный процесс работы выглядит следующим образом:

По правилу:content➜width➜flex-basis, чтобы определить значение, применяемое к элементу Flex, то естьflex-basisбудет применяться к проектам Flex (flex-basisвыиграть)
Тогда по закону: Flex проектаwidthбольше, чемmax-widthКогда элемент Flexwidthравныйmax-width,Сейчасmax-widthможет покрытьwidth(max-widthвыиграть)

Таким образом,если flex-basisбольше, чемmax-width, ширина гибкого элемента будет принимать значениеmax-width,Сейчасmax-widthобложкаflex-basis(max-widthвыиграть).

Если гибкие элементы появляются одновременноwidth,flex-basis,min-widthиmax-width, к приведенному выше правилу будет добавлено новое правило для оценки:

когда min-widthбольше, чемmax-widthчас,min-widthприоритет будет выше, чемmax-width ( min-widthвыиграть).

Затем примените его к проекту Flex:

flex-basisбольше, чемmax-width, ширина гибкого элемента равнаmax-width,Сейчасmax-widthможет покрытьflex-basis(max-width выиграть)
flex-basisменьше, чемmin-width, ширина гибкого элемента будет принимать значениеmin-width,Сейчасmin-widthобложкаflex-basis(min-widthвыиграть)

так какmin-widthбольше, чемmax-widthвозьметmin-width, с этим предварительным условием мы можемflex-basisиmin-widthСделайте сравнение веса, то есть:flex-basisвозьметmin-width. И наоборот, еслиmin-widthменьше, чемmax-widthвсе равно возьмуmax-width, и еслиflex-basisбольше, чемmax-widthвозьметmax-width.

Если вы понимаете это, вы можете использовать более простые правила для определения размера, используемого для гибких элементов.

Сначала согласно content➜width➜flex-basisчтобы решить, что использовать для проектов Flex. Если элемент flex установлен явноflex-basisсвойство, оно игнорируетсяcontentиwidth. иmin-widthиспользуется для установки нижнего предела элемента Flex;max-widthИспользуется для установки верхнего предельного значения гибкого элемента.

Используйте простую блок-схему для описания:

Примечание. Элементы Flex flex-shrinkиflex-growТакже влияет на размер гибкого элемента.!

маржа на гибких элементах

Явно задано во гибких элементахmarginзначениеautoВы можете гибко управлять положением одного гибкого элемента во гибком контейнере:

Например, для эффекта, подобного изображению ниже, используйтеmargin-left: autoЭто очень полезно:

Отделка корпуса

проблема заполнения и автоматической ширины

В этом случае лучшее решение не устанавливает никаких явных значений.paddingиmarginхарактеристики. Ручная реализация может выглядеть так:

<div class="flex__container">
  <span class="coupon">卷</span>
  <span class="divider"></span>
  <span class="price">&yen;1000</span>
</div>



.flex__container {
  display: inline-flex;
  min-width: 200px;
  height: 60px;
  
  border: 1px solid rgba(255, 0, 54, 1);
  background-color: rgba(255, 0, 54, 0.1);
  border-radius: 4px;
  color: #ff0036;
  font-size: 24px;
  font-weight: 400;
}

.flex__container > span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.divider {
  border-right: 1px dashed currentColor;
}

.coupon {
  min-width: 50px;
}

.price {
  flex: 1;
  min-width: 0;
  padding: 0 10px;
}

① Подобно кнопке, значку и т. д. (форма похожа на встроенный блок), установите для контейнера Flex значениеinline-flexи установитеmin-width(эквивалентно Sketch по умолчанию) иheight
② Из анализа эскизного проекта видно, что ширина предыдущего «рулета» известна, и на этом элементе задана фиксированная ширина.width
③ встреча1pxРазделительную линию можно использоватьborderили мертвая ширинаwidth
④ "Цена" в крайнем правом углу – это следующий неопределенный фактор. Для элементов Flex его можно задать явно.flex: 1, пусть раздел займет оставшееся пространство гибкого контейнера
⑤ Чтобы сделать «цену» более расширяемой, когда ее значение расширяется до точки, где в контейнере flex не остается места, число будет близко к конечной точке и разделительной линии главной оси контейнера flex. , Чтобы сделать его визуально дружественным, его следует установить в контейнере «цена».padding-leftиpadding-right

резюме

Эта заметка охватывает большую часть содержимого спецификации Flexbox и некоторые критические моменты.В дополнение к некоторому основному содержанию и деталям, упомянутым в статье, есть и другие аспекты использования Flexbox для завершения макета в пользовательском интерфейсе. Например, позиционирование во Flex-контейнере, иерархический расчет и т. д., Flex-контейнер и встреча Flex-элемента.overflowИ расчеты прокрутки во flex-контейнерах и т. д. Они очень специфичны для сцены, и обработка границы слишком сложна. При обычном использовании Flexbox мы редко или даже редко сталкиваемся с ним. Поэтому в статье не указан.

Если вы используете Flexbox, особенно используя imgcook для автоматического восстановления пользовательского интерфейса, эффект отличается от того, что вы ожидали, или есть что-то необоснованное, вы можете сообщить об этом в любое время.