Настройки Layout определяют, как элементы расположены внутри контейнера.
Здесь вы решаете, будут ли элементы идти рядом, друг под другом, по центру, с промежутками и т. д.

​

4 ключевые настройки

​

1. Direction (самая важная)

Определяет, как элементы размещаются внутри контейнера.

​

Horizontal (строка)

• Элементы идут слева → направо
• Пример: кнопки рядом друг с другом

👉 Используйте для:

• Строк
• Инлайн-элементов
• Колонок рядом

​

Vertical (столбец)

• Элементы идут сверху → вниз
• Пример: заголовок → текст → кнопка

👉 Используйте для:

• Форм
• Контента, расположенного друг под другом
• Большинства макетов (значение по умолчанию)

​

2. Distribution (распределение элементов)

Определяет, как элементы распределяются по контейнеру. Основные варианты:

• Start → элементы прижаты к началу
• Center → элементы по центру
• End → элементы прижаты к концу
• Space Between → первый слева, последний справа, между ними равные промежутки
• Space Around → равное пространство вокруг элементов

👉 Пример: Если у вас 3 кнопки:

• Space Between → растянутся на всю ширину
• Center → сгруппируются посередине

​

3. Align Items (выравнивание)

Определяет выравнивание по оси, перпендикулярной Direction.

​

Если Direction = Row (горизонтально):

• Align Items = вертикальное выравнивание
  • Top
  • Center
  • Bottom

​

Если Direction = Column (вертикально):

• Align Items = горизонтальное выравнивание
  • Left
  • Center
  • Right

​

4. Gap

• Задаёт расстояние между элементами
• Работает как автоматический отступ

👉 Пример:

• Gap = 20 → добавляет одинаковый отступ между всеми элементами

​

Простые примеры

​

Пример 1: всё по центру

• Direction: Vertical
• Align Items: Center
• Distribution: Center

👉 Результат: всё идеально отцентрировано

​

Пример 2: кнопки в ряд

• Direction: Horizontal
• Distribution: Space Between
• Align Items: Center

👉 Результат: кнопки равномерно распределены по горизонтали

​

Пример 3: простая форма

• Direction: Vertical
• Align Items: Left
• Gap: 10–20

👉 Результат: аккуратная вертикальная форма

​

Частые ошибки

❌ Пытаться центрировать элементы, не меняя Direction
❌ Путать Align Items и Distribution
❌ Добавлять margin вместо Gap
❌ Забывать, что контейнер управляет дочерними элементами

​

Рекомендации

• Начинайте с Column для большинства макетов
• Используйте Row только при необходимости
• Используйте Gap вместо ручных отступов
• Делайте макеты простыми и единообразными