Перейти к основному содержимому

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

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

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

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

Прежде чем мы продолжим, предлагаю поиграть в игру Flexbox Froggy. Задача игры - это перемещение лягушенков на листы лилии используя для этого свойства flexbox.

flexbox foggy

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

Flex#

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

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

Flex Direction#

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

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

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

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

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

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

Оплата#

Сейчас ты находишся на урезанной версии сайта, после оформления подписки на Patreon, ты получишь полный доступ к обучающему курсу, а также доступ к серетным каналам нашего сервера в Discord.

Качай наше мобильное приложение или пройди тестирование в нашем JavaScript телеграм боте, а также подпишись на наши новости.

Become a Patron!

Sumerian school

Contributors ✨#

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev

📖 💵