Установить поведение контейнера

Для настройки поведения контейнера FlexBox создайте блок FlexBoxConfig и передайте его параметры config .

FlexBox(
    config = {
        direction = FlexDirection.Column
        wrap = FlexWrap.Wrap
        alignItems = FlexAlignItems.Center
        alignContent = FlexAlignContent.SpaceAround
        justifyContent = FlexJustifyContent.Center
        gap(16.dp)
    }
) { // child items
}
FlexBoxSnippets.kt

Используйте FlexBoxConfig для определения направления компоновки, поведения переноса строк, выравнивания и промежутков между элементами.

Направление компоновки

Свойство direction определяет главную ось, которая задает направление расположения элементов.

• Row (по умолчанию): Задает горизонтальную ось для основной оси. В локалях с направлением письма слева направо это будет слева направо, а в локалях с направлением справа налево — наоборот.
• RowReverse : Изменяет направление Row .
• Column : Задает вертикальную ось оси сверху вниз.
• ColumnReverse : Изменяет направление Column на противоположное.

Расположите предметы в правильном порядке и распределите лишнее пространство.

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

Вдоль главной оси

Используйте justifyContent для распределения элементов вдоль основной оси. В следующей таблице показано поведение при направлении Row .

Start
Center
End
SpaceBetween
SpaceAround
SpaceEvenly

Вдоль поперечной оси

Используйте alignItems для выравнивания элементов вдоль поперечной оси в пределах одной линии. Это поведение можно изменить для отдельных элементов с помощью модификатора alignSelf .

На следующих изображениях показано поведение при направлении Row :

	Start	End	Center	Stretch	Baseline

Используйте alignContent для выравнивания строк по поперечной оси и распределения дополнительного пространства между строками. Это свойство применяется только при наличии нескольких строк (включен перенос строк). На следующих изображениях показано поведение при направлении Row :

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

Упаковать товары

Перенос элементов позволяет контейнеру FlexBox стать многострочным, перемещая элементы, которые не помещаются в строку или столбец, на новую строку или столбец вдоль поперечной оси. Настройте поведение переноса с помощью wrap .

значение FlexWrap	Пример использования направления Row
NoWrap (по умолчанию): Предотвращает перенос элементов. Элементы выходят за пределы основного размера, если он недостаточен.
Wrap : Если места для элемента (плюс любой зазор ) недостаточно, создается новая строка в направлении поперечной оси. Например, если направление — Row , новая строка добавляется ниже .
WrapReverse : То же самое, что и Wrap , за исключением того, что новая строка добавляется в направлении, противоположном поперечной оси. Например, если направление — Row , новая строка добавляется выше .

Следующий пример демонстрирует работу алгоритма обертывания FlexBox . Контейнер FlexBox имеет основной размер 100dp , параметр wrap установлен на FlexWrap.Wrap , а зазор составляет 8dp . Он содержит три элемента с basis 20dp , 40dp и 50dp соответственно.

В ряду имеется 100dp свободного места. Дочерний элемент 1 находится на 20dp . Место есть, поэтому дочерний элемент 1 помещается в ряд.

В линии имеется 80dp свободного пространства. Зазор составляет 8dp . Дочерний элемент 2 находится 40dp . Требуемое пространство составляет 48dp . Поскольку пространство есть, зазор и дочерний элемент 2 размещаются в линии.

В строке доступно 32dp свободного места. Промежуток составляет 8dp . Дочерний элемент 3 находится 50dp . Требуемое пространство составляет 58dp . В текущей строке недостаточно места, поэтому дочерний элемент 3 помещается в новую строку.

Добавьте промежутки между элементами.

Добавьте промежутки между строками и столбцами, используя rowGap и columnGap . Это полезно, чтобы избежать добавления модификаторов отступов к дочерним элементам.

rowGap Добавляет вертикальное пространство между элементами и строками.	columnGap Добавляет горизонтальное пространство между элементами и строками.	gap — это вспомогательная функция, которая суммирует значения columnGap и rowGap .