Верстка компонентов — Flexbox

«Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов.»

⚠️ Отличие от CSS

В React Native flexDirection по умолчанию — column (не row)! alignContent по умолчанию flex-start (не stretch). flex принимает только одно число.

flex

Определяет, как элементы «заполняют» доступное пространство. Пример: красный=flex:1, жёлтый=flex:2, зелёный=flex:3 → соотношение 1/6, 2/6, 3/6.

flexDirection

column (по умолчанию) — сверху вниз
row — слева направо
column-reverse — снизу вверх
row-reverse — справа налево

justifyContent (главная ось)

flex-start (по умолчанию)
flex-end, center
space-between, space-around, space-evenly

alignItems (поперечная ось)

stretch (по умолчанию), flex-start, flex-end, center, baseline

Абсолютное и относительное позиционирование

relative (по умолчанию) — в обычном потоке + смещение
absolute — независимо от соседей, по top/right/bottom/left

💡 Практика

Тренируй Flexbox на Flexbox Froggy.

← НазадProps Далее →Цвета