> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout: выравнивание и отступы элементов в контейнере

> Настройки Layout в LanderLab: Direction, Distribution, Align Items и Gap помогают расположить элементы в контейнере рядом, столбцом или по центру.

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

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Cnvtc1TpBSCIUd3d/images/layout.png?fit=max&auto=format&n=Cnvtc1TpBSCIUd3d&q=85&s=afda0f90df4a03e3db8fe710c9032e0e" alt="Настройки Layout: направление, распределение, выравнивание и Gap" width="1920" height="992" data-path="images/layout.png" />
</Frame>

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

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

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

### Horizontal (строка)

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

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

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

### Vertical (столбец)

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

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

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

<Warning>
  Если что-то выравнивается неправильно, сначала проверьте Direction — это проблема №1 у пользователей.
</Warning>

## 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

<Note>
  **Важно:**

  * Direction = главная ось
  * Align Items = поперечная ось

  (Именно здесь возникает больше всего путаницы)
</Note>

## 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<br />❌ Путать Align Items и Distribution<br />❌ Добавлять margin вместо Gap<br />❌ Забывать, что контейнер управляет дочерними элементами

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

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

<Note>
  **Золотое правило:**<br />Если что-то выглядит «не так», почти всегда дело в одном из двух:

  * Неверный Direction
  * Неверное выравнивание
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.