Flexbox в Wepps Platform: Руководство по построению интерфейсов

Введение

Flexbox.css - это готовая система классов для создания адаптивных макетов в Wepps Platform. Система предоставляет удобные классы для управления раскладкой без необходимости писать CSS вручную.

Зачем использовать Flexbox.css?

Проблемы, которые решает система

1. Единообразие кода - все разработчики используют одинаковые классы
2. Адаптивность из коробки - автоматическая поддержка трех breakpoints
3. Скорость разработки - не нужно писать CSS для типовых раскладок
4. Предсказуемость - поведение классов задокументировано

Когда использовать

• Создание сеток элементов (товары, новости, карточки)
• Горизонтальное и вертикальное выравнивание
• Адаптивные раскладки с переносом строк
• Управление порядком элементов

Основные концепции

Базовая структура

<div class="w_flex w_flex_row">
    <div class="w_flex_12">Элемент 1</div>
    <div class="w_flex_12">Элемент 2</div>
</div>

Классы контейнеров

Базовые контейнеры

• .w_flex - создает flex-контейнер (display: flex)
• .w_inline_flex - создает inline-flex контейнер

<!-- Блочный flex -->
<div class="w_flex w_flex_row">...</div>

<!-- Инлайновый flex -->
<span class="w_inline_flex w_flex_row">...</span>

Направление раскладки

.w_flex_row - горизонтальная раскладка

<div class="w_flex w_flex_row">
    <div class="w_flex_13">33%</div>
    <div class="w_flex_13">33%</div>
    <div class="w_flex_13">33%</div>
</div>

Свойства:

• Ширина: 100%
• Перенос: wrap (элементы переносятся на новую строку)
• Выравнивание: space-between по горизонтали, center по вертикали

.w_flex_col - вертикальная раскладка

<div class="w_flex w_flex_col" style="height: 300px;">
    <div class="w_flex_12">50%</div>
    <div class="w_flex_12">50%</div>
</div>

Особенности:

• Элементы растягиваются на всю ширину
• Высота элементов задается через классы w_flex_XX

Классы размеров элементов

Для горизонтальной раскладки (w_flex_row)

Примеры использования

<!-- Сетка товаров 4 в ряд -->
<div class="w_flex w_flex_row">
    <div class="w_flex_14">Товар 1</div>
    <div class="w_flex_14">Товар 2</div>
    <div class="w_flex_14">Товар 3</div>
    <div class="w_flex_14">Товар 4</div>
</div>

<!-- Сайдбар 1/3 + контент 2/3 -->
<div class="w_flex w_flex_row">
    <div class="w_flex_13">Сайдбар</div>
    <div class="w_flex_23">Основной контент</div>
</div>

<!-- Асимметричная раскладка -->
<div class="w_flex w_flex_row">
    <div class="w_flex_25">40%</div>
    <div class="w_flex_35">60%</div>
</div>

Для вертикальной раскладки (w_flex_col)

Классы работают аналогично, но управляют высотой:

<div class="w_flex w_flex_col" style="height: 600px;">
    <div class="w_flex_13">Шапка - 33%</div>
    <div class="w_flex_23">Контент - 67%</div>
</div>

Гибкие размеры

.w_flex_max - автоматический размер

Элемент занимает все доступное пространство:

<div class="w_flex w_flex_row">
    <div class="w_flex_fix">Логотип</div>
    <div class="w_flex_max">Растягивается</div>
    <div class="w_flex_fix">Кнопка</div>
</div>

.w_flex_fix - фиксированный размер

Элемент занимает только необходимое пространство:

<div class="w_flex w_flex_row">
    <div class="w_flex_fix" style="width: 200px;">Фиксированный</div>
    <div class="w_flex_max">Остальное место</div>
</div>

Выравнивание

Горизонтальное выравнивание (justify-content)

<!-- По умолчанию: space-between -->
<div class="w_flex w_flex_row">...</div>

<!-- К началу -->
<div class="w_flex w_flex_row w_flex_start">...</div>

<!-- К концу -->
<div class="w_flex w_flex_row w_flex_end">...</div>

<!-- По центру -->
<div class="w_flex w_flex_row w_flex_center">...</div>

Вертикальное выравнивание (align-items)

<!-- По умолчанию: center -->
<div class="w_flex w_flex_row">...</div>

<!-- По верхнему краю -->
<div class="w_flex w_flex_row w_flex_row_top">...</div>

<!-- По нижнему краю -->
<div class="w_flex w_flex_row w_flex_row_bottom">...</div>

<!-- Растянуть на всю высоту -->
<div class="w_flex w_flex_row w_flex_row_str">...</div>

Центрирование

<!-- Центрирование по обеим осям -->
<div class="w_flex w_flex_center" style="height: 300px;">
    <div>Я в центре</div>
</div>

Управление переносом

.w_flex_nowrap - запрет переноса

Элементы остаются в одной строке:

<div class="w_flex w_flex_row w_flex_nowrap">
    <div class="w_flex_14">1</div>
    <div class="w_flex_14">2</div>
    <div class="w_flex_14">3</div>
    <div class="w_flex_14">4</div>
    <div class="w_flex_14">5</div>
    <!-- Переполнение вместо переноса -->
</div>

Позиционирование отдельных элементов

Горизонтальное смещение

<div class="w_flex w_flex_row">
    <div>Слева</div>
    <div class="w_flex_right">Справа</div>
</div>

<div class="w_flex w_flex_row">
    <div class="w_flex_left">Слева</div>
    <div>Справа</div>
</div>

Порядок элементов

Классы .w_order_*

Управляют порядком отображения элементов:

<div class="w_flex w_flex_row">
    <div class="w_order_3">Отображается третьим</div>
    <div class="w_order_1">Отображается первым</div>
    <div class="w_order_2">Отображается вторым</div>
</div>

Доступные значения: w_order_1 до w_order_6

Отступы между элементами

Через CSS Gap

<!-- Стандартный отступ (var(--s3)) -->
<div class="w_flex w_flex_row w_flex_gap">
    <div class="w_flex_13">1</div>
    <div class="w_flex_13">2</div>
    <div class="w_flex_13">3</div>
</div>

<!-- Малый отступ (var(--s)) -->
<div class="w_flex w_flex_row w_flex_gap_small">...</div>

<!-- Средний отступ (var(--s4)) -->
<div class="w_flex w_flex_row w_flex_gap_medium">...</div>

<!-- Большой отступ (var(--s5)) -->
<div class="w_flex w_flex_row w_flex_gap_large">...</div>

Через Margin

<!-- Стандартный отступ через margin -->
<div class="w_flex w_flex_row w_flex_margin">
    <div class="w_flex_14">1</div>
    <div class="w_flex_14">2</div>
    <div class="w_flex_14">3</div>
    <div class="w_flex_14">4</div>
</div>

<!-- С вариантами размера -->
<div class="w_flex w_flex_row w_flex_margin_small">...</div>
<div class="w_flex w_flex_row w_flex_margin_medium">...</div>
<div class="w_flex w_flex_row w_flex_margin_large">...</div>

С внутренним padding

<!-- Gap + padding внутри контейнера -->
<div class="w_flex w_flex_row w_flex_margin w_padding">
    <div class="w_flex_13">1</div>
    <div class="w_flex_13">2</div>
    <div class="w_flex_13">3</div>
</div>

Адаптивность

Система поддерживает три брейкпоинта:

• Desktop (> 810px) - базовые классы
• Medium (≤ 810px) - классы с суффиксом _view_medium
• Small (≤ 480px) - классы с суффиксом _view_small

Примеры адаптивной раскладки

<!-- 4 колонки на desktop, 2 на medium, 1 на small -->
<div class="w_flex w_flex_row">
    <div class="w_flex_14 w_flex_12_view_medium w_flex_11_view_small">
        Товар 1
    </div>
    <div class="w_flex_14 w_flex_12_view_medium w_flex_11_view_small">
        Товар 2
    </div>
    <div class="w_flex_14 w_flex_12_view_medium w_flex_11_view_small">
        Товар 3
    </div>
    <div class="w_flex_14 w_flex_12_view_medium w_flex_11_view_small">
        Товар 4
    </div>
</div>

<!-- Сайдбар справа на desktop, снизу на medium/small -->
<div class="w_flex w_flex_row">
    <div class="w_flex_23 w_flex_11_view_medium w_order_2_view_medium">
        Контент
    </div>
    <div class="w_flex_13 w_flex_11_view_medium w_order_1_view_medium">
        Сайдбар
    </div>
</div>

Все адаптивные модификаторы

Каждый основной класс имеет версии с суффиксами:

Размеры:

• w_flex_11_view_medium, w_flex_11_view_small
• w_flex_12_view_medium, w_flex_12_view_small
• И так далее для всех размеров

Выравнивание:

• w_flex_start_view_medium, w_flex_start_view_small
• w_flex_end_view_medium, w_flex_end_view_small
• w_flex_center_view_medium, w_flex_center_view_small
• w_flex_between_view_medium, w_flex_between_view_small

Позиционирование:

• w_flex_left_view_medium, w_flex_left_view_small
• w_flex_right_view_medium, w_flex_right_view_small

Порядок:

• w_order_1_view_medium до w_order_6_view_medium
• w_order_1_view_small до w_order_6_view_small

Практические примеры

1. Каталог товаров

<div class="w_flex w_flex_row w_flex_margin">
    {foreach $products as $product}
    <div class="w_flex_14 w_flex_13_view_medium w_flex_12_view_small">
        <div class="product_card">
            <img src="{$product.image}" alt="{$product.name}">
            <h3>{$product.name}</h3>
            <p class="price">{$product.price} ₽</p>
        </div>
    </div>
    {/foreach}
</div>

2. Шапка сайта

<header class="w_flex w_flex_row w_flex_center">
    <div class="w_flex_fix">
        <img src="/logo.png" alt="Logo" class="logo">
    </div>
    <nav class="w_flex_max">
        <ul class="w_flex w_flex_row w_flex_center">
            <li><a href="/">Главная</a></li>
            <li><a href="/catalog">Каталог</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
    <div class="w_flex_fix">
        <button class="btn_cart">Корзина</button>
    </div>
</header>

3. Карточка товара

<div class="w_flex w_flex_row w_flex_row_top">
    <div class="w_flex_12 w_flex_11_view_medium">
        <div class="product_gallery">
            <!-- Галерея изображений -->
        </div>
    </div>
    <div class="w_flex_12 w_flex_11_view_medium">
        <h1>{$product.name}</h1>
        <div class="price">{$product.price} ₽</div>
        <div class="description">{$product.description}</div>
        <button class="btn_buy">Купить</button>
    </div>
</div>

4. Футер с колонками

<footer class="w_flex w_flex_row w_flex_row_top w_flex_margin">
    <div class="w_flex_14 w_flex_12_view_medium w_flex_11_view_small">
        <h4>О компании</h4>
        <ul>
            <li><a href="/about">О нас</a></li>
            <li><a href="/team">Команда</a></li>
        </ul>
    </div>
    <div class="w_flex_14 w_flex_12_view_medium w_flex_11_view_small">
        <h4>Каталог</h4>
        <ul>
            <li><a href="/category1">Категория 1</a></li>
            <li><a href="/category2">Категория 2</a></li>
        </ul>
    </div>
    <div class="w_flex_14 w_flex_12_view_medium w_flex_11_view_small">
        <h4>Поддержка</h4>
        <ul>
            <li><a href="/faq">FAQ</a></li>
            <li><a href="/support">Поддержка</a></li>
        </ul>
    </div>
    <div class="w_flex_14 w_flex_12_view_medium w_flex_11_view_small">
        <h4>Контакты</h4>
        <p>+7 (999) 123-45-67</p>
        <p>info@example.com</p>
    </div>
</footer>

5. Сложная форма

<form class="w_flex w_flex_row w_flex_margin">
    <div class="w_flex_12">
        <label>Имя</label>
        <input type="text" name="name">
    </div>
    <div class="w_flex_12">
        <label>Фамилия</label>
        <input type="text" name="surname">
    </div>
    <div class="w_flex_11">
        <label>Email</label>
        <input type="email" name="email">
    </div>
    <div class="w_flex_13">
        <label>Телефон</label>
        <input type="tel" name="phone">
    </div>
    <div class="w_flex_23">
        <label>Адрес</label>
        <input type="text" name="address">
    </div>
    <div class="w_flex_11 w_flex_end">
        <button type="submit">Отправить</button>
    </div>
</form>

6. Dashboard с виджетами

<div class="w_flex w_flex_row w_flex_margin">
    <div class="w_flex_13 w_flex_12_view_medium w_flex_11_view_small">
        <div class="widget">
            <h3>Статистика продаж</h3>
            <div class="widget_content">...</div>
        </div>
    </div>
    <div class="w_flex_13 w_flex_12_view_medium w_flex_11_view_small">
        <div class="widget">
            <h3>Новые заказы</h3>
            <div class="widget_content">...</div>
        </div>
    </div>
    <div class="w_flex_13 w_flex_12_view_medium w_flex_11_view_small">
        <div class="widget">
            <h3>Активные пользователи</h3>
            <div class="widget_content">...</div>
        </div>
    </div>
</div>

Лучшие практики

1. Не смешивайте подходы

<!-- ❌ Плохо: смешивание с кастомными стилями -->
<div class="w_flex w_flex_row" style="display: grid;">...</div>

<!-- ✅ Хорошо: либо используйте Flexbox.css, либо свой CSS -->
<div class="w_flex w_flex_row">...</div>

2. Используйте адаптивные классы сразу

<!-- ❌ Плохо: забыли про адаптивность -->
<div class="w_flex w_flex_row">
    <div class="w_flex_14">...</div>
    <div class="w_flex_14">...</div>
    <div class="w_flex_14">...</div>
    <div class="w_flex_14">...</div>
</div>

<!-- ✅ Хорошо: продумали поведение на всех экранах -->
<div class="w_flex w_flex_row">
    <div class="w_flex_14 w_flex_12_view_medium w_flex_11_view_small">...</div>
    <div class="w_flex_14 w_flex_12_view_medium w_flex_11_view_small">...</div>
    <div class="w_flex_14 w_flex_12_view_medium w_flex_11_view_small">...</div>
    <div class="w_flex_14 w_flex_12_view_medium w_flex_11_view_small">...</div>
</div>

3. Выбирайте правильный способ отступов

<!-- Gap - для современных браузеров (предпочтительно) -->
<div class="w_flex w_flex_row w_flex_gap">...</div>

<!-- Margin - для максимальной совместимости -->
<div class="w_flex w_flex_row w_flex_margin">...</div>

4. Семантическая вложенность

<!-- ✅ Правильная структура -->
<section class="w_flex w_flex_row w_flex_margin">
    <article class="w_flex_13">
        <header>...</header>
        <div class="content">...</div>
        <footer>...</footer>
    </article>
</section>

5. Используйте CSS-переменные для отступов

/* В своих стилях можете переопределить переменные */
:root {
    --s: 8px;   /* Малый */
    --s3: 16px; /* Стандартный */
    --s4: 24px; /* Средний */
    --s5: 32px; /* Большой */
}

Отладка

Визуализация раскладки

Добавьте временные стили для отладки:

.w_flex > * {
    outline: 1px solid red;
}

Частые проблемы

1. Элементы не переносятся

<!-- Проверьте, что не используется w_flex_nowrap -->
<div class="w_flex w_flex_row">...</div>

2. Элементы слишком узкие

<!-- Проверьте calc() в max-width при использовании gap/margin -->
<div class="w_flex w_flex_row w_flex_gap">
    <div class="w_flex_14">
        <!-- max-width: calc(24.999% - var(--s3)) -->
    </div>
</div>

3. Вертикальное выравнивание не работает

<!-- Убедитесь, что контейнер имеет высоту -->
<div class="w_flex w_flex_center" style="height: 300px;">
    <div>Теперь центрируется</div>
</div>

Производительность

Минимизация классов

<!-- ❌ Избыточно -->
<div class="w_flex w_flex_row w_flex_center w_flex_row_str w_flex_start">
    <!-- Конфликтующие классы -->
</div>

<!-- ✅ Оптимально -->
<div class="w_flex w_flex_row w_flex_start">...</div>

Переиспользование

<!-- Создайте общий класс для повторяющихся паттернов -->
<style>
.product_grid {
    /* Ваши дополнительные стили */
}
</style>

<div class="w_flex w_flex_row w_flex_margin product_grid">...</div>

Заключение

Система Flexbox.css в Wepps Platform предоставляет:

• ✅ Полный набор классов для типовых раскладок
• ✅ Встроенную адаптивность для трех breakpoints
• ✅ Управление отступами через gap или margin
• ✅ Гибкость в управлении порядком и размерами
• ✅ Совместимость с Smarty-шаблонизацией

Используйте эту систему для быстрого создания консистентных и адаптивных интерфейсов без необходимости писать CSS вручную.

Файл стилей: packages/WeppsExtensions/Template/Layout/Flexbox.css