Эта страница переведена с помощью Cloud Translation API.

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

Для настройки поведения контейнера 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 помещается в ряд.

Первый элемент помещается в контейнер FlexBox. — **Рисунок 1.** Первый предмет, помещенный в контейнер `FlexBox` .

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

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

Третий элемент перенесен на новую строку, потому что он не помещается на первой строке. — **Рисунок 3.** Третий элемент размещен на новой строке, потому что он не помещается на первой строке.

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

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