FlexBox

Примечание: FlexBox в настоящее время является экспериментальным API и, вероятно, изменится в будущем. Сообщайте о любых проблемах в системе отслеживания ошибок .

FlexBox — это контейнер, который размещает элементы в одном направлении. Он может изменять размер, переносить элементы, выравнивать их и распределять пространство между элементами для оптимального заполнения доступного пространства. Это полезная компоновка для элементов разных размеров, а также для изменения размера элементов при изменении доступного пространства.

С помощью FlexBox вы можете:

• Контролируйте, как предметы увеличиваются и уменьшаются в размерах, чтобы заполнить доступное пространство.
• Если для элементов недостаточно места, переносите их на новые строки или столбцы.
• Распределите дополнительное пространство между элементами, используя удобные предустановки.

Когда использовать FlexBox

FlexBox обычно используется для отображения небольшого количества элементов в рамках общей компоновки экрана. Для общей компоновки экрана обычно лучше подходит Grid . FlexBox не поддерживает отложенную загрузку элементов. Для отображения большого количества элементов используйте отложенные списки и сетки . Если вам нужно переносить элементы, используйте FlexBox вместо FlowRow и FlowColumn .

Терминология и понятия

Ключевой момент: FlexBox во многом основан на спецификации CSS Flexible Box Layout и имеет практически идентичные концепции, терминологию и поведение. Если вы знакомы с display: flex , то свойства и поведение FlexBox покажутся вам практически идентичными.

FlexBox располагает свои элементы либо по горизонтали, либо по вертикали. Направление этих линий определяет главную ось . Угол в 90 градусов к главной оси называется поперечной осью . Длина FlexBox вдоль главной оси называется главным размером. Соответствующая длина поперечной оси называется поперечным размером . Эти размеры и оси лежат в основе поведения FlexBox .

Рисунок 1. Оси и размеры при направлении FlexBox Row .

Рисунок 2. Оси и размеры, когда направление FlexBox установлено Column .

Применить свойства

Свойства FlexBox можно применять двумя способами:

• Для подключения к контейнеру FlexBox с помощью FlexBox(config)
• Для элемента внутри FlexBox используйте Modifier.flex

Свойства контейнера ( config )

Свойства элемента ( Modifier.flex )

direction - направление расположения элемента wrap — стоит ли упаковывать вещи, если основной размер недостаточен. justifyContent — как распределить элементы вдоль основной оси alignItems — как выравнивать элементы по поперечной оси alignContent — как распределить лишнее пространство от крестика при наличии нескольких строк. rowGap / columnGap — добавляет пространство между элементами и строками. Дополнительную информацию об этих свойствах см. в разделе «Установка поведения контейнера» .

basis — размер изделия до распределения дополнительного пространства от основного размера. grow — доля дополнительного пространства, которую должен занимать этот предмет по сравнению с его основным размером. shrink — доля дефицита пространства по сравнению с основным размером , которую должен получить этот предмет. alignSelf — как распределить дополнительное пространство от размера крестика на этот элемент, переопределяет alignItems order - управляет порядком расположения элементов. Дополнительную информацию об этих свойствах см. в разделе «Поведение элемента установки» .

Разберитесь в алгоритме компоновки FlexBox

Одна из самых мощных функций FlexBox — это возможность изменять размер дочерних элементов, чтобы они наилучшим образом соответствовали доступному пространству. Понимание того, как FlexBox это делает, поможет вам настроить свойства FlexBox для оптимизации пользовательского интерфейса под все возможные размеры.

Алгоритм компоновки FlexBox работает следующим образом:

1. Рассчитайте базовый размер дочернего элемента : используйте значение basis размера дочернего элемента для расчета его начального размера вдоль главной оси до распределения дополнительного пространства.

2. Отсортировать дочерние элементы : Отсортировать дочерние элементы по их order значениям, если таковые имеются.

3. Создание строк : Для каждого дочернего элемента проверьте, поместится ли его начальный размер плюс gap в оставшееся пространство на текущей строке. Если да, поместите этот дочерний элемент на строку. Если нет, поместите его на новую строку, если включено перенесение строк , или поместите элемент на текущую строку, где он будет выходить за пределы контейнера (он будет частично скрыт краем контейнера).

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

5. Выравнивание или изменение размера элементов по поперечной оси : для каждой строки распределите дополнительное пространство между элементами и строками , растягивая или выравнивая их .

Теперь, когда вы знакомы с концепциями FlexBox , перейдите к разделу «Начало работы» , чтобы создать базовый FlexBox .