Макет с Flexbox

Компонент может задать макет своих дочерних элементов с помощью алгоритма Flexbox. Flexbox разработан для предоставления согласованного макета на разных размерах экрана.

Обычно вы будете использовать комбинацию flexDirection, alignItems, и justifyContent для достижения нужного макета.

Flexbox работает так же в React Native, как и в CSS в веб-приложениях, за несколькими исключениями. Значения по умолчанию отличаются, при этом flexDirection по умолчанию column, а не row, alignContent по умолчанию flex-start, а не stretch, flexShrink по умолчанию 0, а не 1, параметр flex поддерживает только одно число.

Flex

flex определит, как ваши элементы будут «заполнять» доступное пространство по основной оси. Пространство будет разделено в соответствии со свойством flex каждого элемента.

В следующем примере красные, жёлтые и зелёные области являются дочерними элементами области контейнера, у которой установлено значение flex: 1. Красная область использует flex: 1, жёлтая область использует flex: 2, а зелёная область использует flex: 3 . 1+2+3=6, что означает, что красная область получит 1/6 пространства, жёлтая 2/6 пространства, а зелёная 3/6 пространства.

Направление Flex

flexDirection управляет направлением расположения дочерних элементов узла. Это также называется основной осью. Поперечная ось — это ось, перпендикулярная основной оси, или ось, на которой выстраиваются строки обёртки.

• column (значение по умолчанию) Выравнивает дочерние элементы сверху вниз. Если включена обёртка, то следующая строка начнётся справа от первого элемента в верхней части контейнера.

• row Выравнивает дочерние элементы слева направо. Если включена обёртка, то следующая строка начнётся под первым элементом слева от контейнера.

• column-reverse Выравнивает дочерние элементы снизу вверх. Если включена обёртка, то следующая строка начнётся справа от первого элемента в нижней части контейнера.

• row-reverse Выравнивает дочерние элементы справа налево. Если включена обёртка, то следующая строка начнётся под первым элементом справа от контейнера.

Вы можете узнать больше здесь.

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

Направление макета direction указывает направление, в котором должны выстраиваться дочерние элементы и текст в иерархии. Направление макета также влияет на то, к какому краю относятся start и end. По умолчанию React Native выстраивает элементы с направлением макета слева направо. В этом режиме start относится к левой, а end относится к правой стороне.

• LTR (значение по умолчанию) Текст и дочерние элементы выстраиваются слева направо. Отступы, применённые к началу элемента, применяются слева.

• RTL Текст и дочерние элементы выстраиваются справа налево. Отступы, применённые к началу элемента, применяются справа.

Выравнивание по содержимому

justifyContent описывает, как выровнять дочерние элементы вдоль основной оси контейнера. Например, вы можете использовать это свойство для горизонтального выравнивания дочернего элемента по центру контейнера со значением flexDirection в row или вертикального выравнивания по центру в контейнере со значением flexDirection в column.

• flex-start(значение по умолчанию) Выравнивает дочерние элементы контейнера по началу основной оси контейнера.

• flex-end Выравнивает дочерние элементы контейнера по концу основной оси контейнера.

• center Выравнивает дочерние элементы контейнера по центру основной оси контейнера.

• space-between Равномерно размещает дочерние элементы по основной оси контейнера, распределяя оставшееся пространство между ними.

• space-around Равномерно размещает дочерние элементы по основной оси контейнера, распределяя оставшееся пространство вокруг них. По сравнению с space-between, при использовании space-around распределение происходит от начала первого дочернего элемента и до конца последнего.

• space-evenly Равномерно распределяет дочерние элементы внутри контейнера выравнивания по основной оси. Расстояние между каждой парой смежных элементов, началом основной оси и первым элементом, а также концом основной оси и последним элементом одинаково.

Вы можете узнать больше здесь.

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

alignItems описывает, как выровнять дочерние элементы по поперечной оси контейнера. Это очень похоже на justifyContent, но вместо применения к основной оси, alignItems применяется к поперечной оси.

• stretch (значение по умолчанию) Растягивает дочерние элементы контейнера для соответствия height поперечной оси контейнера.

• flex-start Выравнивает дочерние элементы контейнера по началу поперечной оси контейнера.

• flex-end Выравнивает дочерние элементы контейнера по концу поперечной оси контейнера.

• center Выравнивает дочерние элементы контейнера по центру поперечной оси контейнера.

• baseline Выравнивает дочерние элементы контейнера по общей базовой линии. Каждый дочерний элемент может быть задан как базовая линия для своих родителей.

Для того чтобы stretch оказало влияние, дочерние элементы не должны иметь фиксированный размер по вторичной оси. В следующем примере, установление alignItems: stretch ничего не делает до тех пор, пока width: 50 не будет удалено из дочерних элементов.

Вы можете узнать больше здесь.

Выравнивание по себе

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

Выравнивание содержимого

alignContent определяет распределение строк вдоль поперечной оси. Это действует только в том случае, если элементы обёрнуты в несколько строк с помощью flexWrap.

• flex-start (значение по умолчанию) Выравнивает обёрнутые строки по началу поперечной оси контейнера.

• flex-end Выравнивает обёрнутые строки по концу поперечной оси контейнера.

• stretch (значение по умолчанию при использовании Yoga в веб-приложениях) Растягивает обёрнутые строки, чтобы соответствовать высоте поперечной оси контейнера.

• center Выравнивает обёрнутые строки по центру поперечной оси контейнера.

• space-between Равномерно распределяет обёрнутые строки по поперечной оси контейнера, распределяя оставшееся пространство между ними.

• space-around Равномерно распределяет обёрнутые строки по поперечной оси контейнера, распределяя оставшееся пространство вокруг них. По сравнению с space-between, при использовании space-around распределение происходит от начала первой строки и до конца последней.

Вы можете узнать больше здесь.

Перенос Flex

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

При обёртывании строк, alignContent можно использовать для указания того, как строки размещаются в контейнере. Узнайте больше здесь.

Flex Basis, Grow и Shrink

• flexBasis — это независимый от оси способ задания размера элемента по умолчанию по основной оси. Установка flexBasis дочернего элемента аналогична установке width этого дочернего элемента, если его родитель — контейнер с flexDirection: row, или установке height дочернего элемента, если его родитель — контейнер с flexDirection: column. flexBasis элемента — это размер элемента по умолчанию, размер элемента до выполнения расчётов flexGrow и flexShrink.

• flexGrow описывает, как любое пространство внутри контейнера должно распределяться между его дочерними элементами по основной оси. После выстраивания своих дочерних элементов, контейнер будет распределять любое оставшееся пространство в соответствии со значениями flex grow, указанными его дочерними элементами.

  flexGrow принимает любое число с плавающей точкой >= 0, причём 0 — значение по умолчанию. Контейнер будет распределять оставшееся пространство среди своих дочерних элементов, взвешенных значениями flexGrow его дочерних элементов.

• flexShrink описывает, как уменьшать дочерние элементы по основной оси в случае, если общий размер дочерних элементов превышает размер контейнера по основной оси. flexShrink очень похож на flexGrow, и его можно рассматривать аналогичным образом, если любой превышающий размер рассматривается как отрицательное оставшееся пространство. Эти два свойства также хорошо работают вместе, позволяя детям расти и уменьшаться по мере необходимости.

  flexShrink принимает любое число с плавающей точкой >= 0, причём 0 — значение по умолчанию (в веб-приложениях по умолчанию 1). Контейнер будет уменьшать своих дочерних элементов, взвешенных значениями flexShrink своих дочерних элементов.

Вы можете узнать больше здесь.

Ширина и высота

Свойство width задаёт ширину области содержимого элемента. Аналогично, свойство height задаёт высоту области содержимого элемента.

И width и height могут принимать следующие значения:

• auto (значение по умолчанию) React Native вычисляет ширину/высоту элемента на основе его содержимого, будь то другие дочерние элементы, текст или изображение.

• pixels Определяет ширину/высоту в абсолютных пикселях. В зависимости от других стилей, заданных для компонента, это может быть или не быть окончательным размером узла.

• percentage Определяет ширину или высоту в процентах от ширины или высоты родительского элемента соответственно.

Абсолютное и относительное расположение

Тип position элемента определяет, как он позиционируется внутри родительского элемента.

• relative (значение по умолчанию) По умолчанию элемент позиционируется относительно. Это означает, что элемент позиционируется согласно стандартному потоку макета, а затем смещается относительно этого положения на основе значений top, right, bottom, и left. Смещение не влияет на положение каких-либо элементов-потомков или родительских элементов.

• absolute При абсолютном позиционировании элемент не участвует в стандартном потоке макета. Вместо этого он выстраивается независимо от своих потомков. Положение определяется на основе значений top, right, bottom, и left.

Более глубокое погружение

Изучите интерактивную площадку для экспериментов с Yoga, чтобы лучше понять Flexbox.

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

Кроме того, вы можете посмотреть примеры от инженеров Wix.