Свойства макета

Более подробные примеры этих свойств можно найти на странице Макет с Flexbox.

Пример

Следующий пример демонстрирует, как различные свойства могут влиять или формировать макет React Native. Вы можете, например, добавить или удалить квадраты из пользовательского интерфейса, изменяя значения свойства flexWrap.

Справочник

Свойства

alignContent

alignContent управляет выравниванием строк в поперечном направлении, переопределяя alignContent родительского элемента. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/align-content.

alignItems

alignItems выравнивает дочерние элементы в поперечном направлении. Например, если дочерние элементы выстраиваются вертикально, то alignItems управляет их выравниванием по горизонтали. Работает как align-items в CSS (по умолчанию: stretch). Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/align-items.

alignSelf

alignSelf управляет выравниванием дочернего элемента в поперечном направлении, переопределяя alignItems родительского элемента. Работает как align-self в CSS (по умолчанию: auto). Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/align-self.

aspectRatio

Соотношение сторон управляет размером неопределенного измерения узла. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio.

• Для узла с заданной шириной/высотой соотношение сторон управляет размером незаданного измерения
• Для узла с заданным flex basis, соотношение сторон управляет размером узла в поперечной оси, если оно не задано
• Для узла с функцией измерения, соотношение сторон работает так, как будто функция измерения измеряет flex basis
• Для узла с flex grow/shrink, соотношение сторон управляет размером узла в поперечной оси, если оно не задано
• Соотношение сторон учитывает минимальные и максимальные размеры

borderBottomWidth

borderBottomWidth работает как border-bottom-width в CSS. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width.

borderEndWidth

Когда направление ltr, borderEndWidth эквивалентно borderRightWidth. Когда направление rtl, borderEndWidth эквивалентно borderLeftWidth.

borderLeftWidth

borderLeftWidth работает как border-left-width в CSS. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width.

borderRightWidth

borderRightWidth работает как border-right-width в CSS. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width.

borderStartWidth

Когда направление ltr, borderStartWidth эквивалентно borderLeftWidth. Когда направление rtl, borderStartWidth эквивалентно borderRightWidth.

borderTopWidth

borderTopWidth работает как border-top-width в CSS. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width.

borderWidth

borderWidth работает как border-width в CSS. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/border-width.

bottom

bottom — это число логических пикселей смещения нижнего края этого компонента.

Он работает аналогично bottom в CSS, но в React Native необходимо использовать точки или проценты. Единицы em и другие единицы не поддерживаются.

См. https://developer.mozilla.org/en-US/docs/Web/CSS/bottom для получения подробной информации о том, как bottom влияет на макет.

direction

direction задаёт направление потока пользовательского интерфейса. По умолчанию это inherit, за исключением корневого узла, значение которого зависит от текущего языка. Подробнее см. https://yogalayout.com/docs/layout-direction.

display

display задаёт тип отображения этого компонента.

Он работает аналогично display в CSS, но поддерживает только 'flex' и 'none'. По умолчанию используется 'flex'.

end

Когда направление — ltr, end эквивалентно right. Когда направление — rtl, end эквивалентно left.

Этот стиль имеет приоритет над стилями left и right.

flex

В React Native flex работает не так, как в CSS. flex — это число, а не строка, и оно работает в соответствии с движком макета Yoga.

Когда flex — положительное число, это делает компонент гибким, и он будет масштабироваться пропорционально своему значению flex. Таким образом, компонент с flex равным 2 займёт вдвое больше места, чем компонент с flex равным 1. flex: <positive number> эквивалентно flexGrow: <positive number>, flexShrink: 1, flexBasis: 0.

Когда flex равно 0, компонент масштабируется в соответствии с width и height, и он жёсткий.

Когда flex равно -1, компонент обычно масштабируется в соответствии с width и height. Однако, если места недостаточно, компонент уменьшится до своих minWidth и minHeight.

flexGrow, flexShrink, и flexBasis работают так же, как в CSS.

flexBasis

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

flexDirection

flexDirection управляет направлением расположения дочерних элементов контейнера. row — слева направо, column — сверху вниз, и вы, возможно, догадаетесь, что делают остальные два. Он работает как flex-direction в CSS, за исключением того, что по умолчанию установлено значение column. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction.

flexGrow

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

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

flexShrink

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

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

flexWrap

flexWrap управляет тем, могут ли дочерние элементы обтекать друг друга после достижения конца контейнера flex. Он работает так же, как flex-wrap в CSS (по умолчанию: nowrap). Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap. Обратите внимание, что он больше не работает с alignItems: stretch (по умолчанию), поэтому вам может понадобиться использовать alignItems: flex-start (изменения в работе: https://github.com/facebook/react-native/releases/tag/v0.28.0).

height

height задаёт высоту этого компонента.

Он работает аналогично height в CSS, но в React Native вы должны использовать точки или проценты. Ems и другие единицы не поддерживаются. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/height.

justifyContent

justifyContent выравнивает дочерние элементы по направлению. Например, если дочерние элементы текут вертикально, justifyContent управляет их вертикальным выравниванием. Он работает так же, как justify-content в CSS (по умолчанию: flex-start). Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content.

left

left — это количество логических пикселей для смещения левого края этого компонента.

Он работает аналогично left в CSS, но в React Native вы должны использовать точки или проценты. Ems и другие единицы не поддерживаются.

Подробнее о том, как left влияет на макет, см. https://developer.mozilla.org/en-US/docs/Web/CSS/left.

margin

Установка margin имеет тот же эффект, что и установка каждого из marginTop, marginLeft, marginBottom, и marginRight. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/margin.

marginBottom

marginBottom работает так же, как margin-bottom в CSS. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom.

marginEnd

Когда направление ltr, marginEnd эквивалентно marginRight. Когда направление rtl, marginEnd эквивалентно marginLeft.

marginHorizontal

Установка marginHorizontal имеет тот же эффект, что и установка как marginLeft, так и marginRight.

marginLeft

marginLeft работает так же, как margin-left в CSS. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left.

marginRight

marginRight работает так же, как margin-right в CSS. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right.

marginStart

Когда направление — ltr, marginStart эквивалентно marginLeft. Когда направление — rtl, marginStart эквивалентно marginRight.

marginTop

marginTop работает так же, как margin-top в CSS. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top.

marginVertical

Установка marginVertical имеет тот же эффект, что и установка как marginTop, так и marginBottom.

maxHeight

maxHeight — максимальная высота этого компонента в логических пикселях.

Он работает аналогично max-height в CSS, но в React Native вы должны использовать точки или проценты. Единицы em и другие единицы не поддерживаются.

Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/max-height.

maxWidth

maxWidth — максимальная ширина этого компонента в логических пикселях.

Он работает аналогично max-width в CSS, но в React Native вы должны использовать точки или проценты. Единицы em и другие единицы не поддерживаются.

Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/max-width.

minHeight

minHeight — минимальная высота этого компонента в логических пикселях.

Он работает аналогично min-height в CSS, но в React Native вы должны использовать точки или проценты. Единицы em и другие единицы не поддерживаются.

Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/min-height.

minWidth

minWidth — минимальная ширина этого компонента в логических пикселях.

Он работает аналогично min-width в CSS, но в React Native вы должны использовать точки или проценты. Единицы em и другие единицы не поддерживаются.

Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/min-width.

overflow

overflow управляет тем, как подчинённые элементы измеряются и отображаются. overflow: hidden приводит к обрезке представлений, а overflow: scroll приводит к измерению представлений независимо от основной оси родительских элементов. Он работает так же, как overflow в CSS (по умолчанию: видимый). Подробнее см. https://developer.mozilla.org/en/docs/Web/CSS/overflow.

padding

Установка padding имеет тот же эффект, что и установка каждого из paddingTop, paddingBottom, paddingLeft, и paddingRight.

Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/padding.

paddingBottom

paddingBottom работает так же, как padding-bottom в CSS. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom.

paddingEnd

Когда направление — ltr, paddingEnd эквивалентно paddingRight. Когда направление — rtl, paddingEnd эквивалентно paddingLeft.

paddingHorizontal

Установка paddingHorizontal аналогична установке paddingLeft и paddingRight.

paddingLeft

paddingLeft работает так же, как padding-left в CSS. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left.

paddingRight

paddingRight работает так же, как padding-right в CSS. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right.

paddingStart

Когда направление — ltr, paddingStart эквивалентно paddingLeft. Когда направление — rtl, paddingStart эквивалентно paddingRight.

paddingTop

paddingTop работает так же, как padding-top в CSS. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top.

paddingVertical

Установка paddingVertical аналогична установке paddingTop и paddingBottom.

position

position в React Native аналогично обычным CSS, но по умолчанию всё установлено в relative, поэтому позиционирование absolute всегда относительно родителя.

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

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

Подробнее о том, как position отличается в React Native и CSS, см. https://github.com/facebook/yoga.

right

right — количество логических пикселей смещения правого края этого компонента.

Работает аналогично right в CSS, но в React Native необходимо использовать точки или проценты. Единицы ems и другие не поддерживаются.

Подробнее о влиянии right на макет см. https://developer.mozilla.org/en-US/docs/Web/CSS/right.

start

Когда направление — ltr, start эквивалентно left. Когда направление — rtl, start эквивалентно right.

Этот стиль имеет приоритет над стилями left, right и end.

top

top — количество логических пикселей смещения верхнего края этого компонента.

Работает аналогично top в CSS, но в React Native необходимо использовать точки или проценты. Единицы ems и другие не поддерживаются.

Подробнее о влиянии top на макет см. https://developer.mozilla.org/en-US/docs/Web/CSS/top.

width

width задаёт ширину этого компонента.

Работает аналогично width в CSS, но в React Native необходимо использовать точки или проценты. Единицы ems и другие не поддерживаются. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/width.

zIndex

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

Работает как свойство CSS z-index. Компоненты с большим значением zIndex будут отрисовываться сверху. Представьте себе z-направление, указывающее от телефона к вашему глазу. Подробнее см. https://developer.mozilla.org/en-US/docs/Web/CSS/z-index.

В iOS, для корректной работы zIndex требуется, чтобы View были братьями друг друга.