Платформа 3V/Формы/Компоненты/Верстка/Контейнер

Материал из 3v-wiki
Перейти к навигации Перейти к поиску

Код компонента: bs-flex

Описание: Выводит флекс контейнер - представляет собой способ компоновки элементов, в основе лежит идея оси.

Свойства:

Код Тип Описание
type string Тип компонента
templateOptions
direction string Направление элементов
"row" Слева направо →
"row-reverse" Справа налево ←
"column" Сверху вниз ↓
"column-reverse" Снизу вверх ↑
wrap string Правило переноса
"nowrap" В одну линию
"wrap" В несколько линий
"wrap-reverse" В несколько линий (инверсия)
justifyContent string Выравнивание по главной оси
"start" С начала
"end" С конца
"center" По центру
"between" Равномерно
"around" Равномерно (с отступами)
alignItems string Выравнивание по поперечной оси
"start" С начала
"end" С конца
"center" По центру
"baseline" По центу (baseline)
"stretch" Растянуть
alignContent string Выравнивание по поперечной оси (при наличии свободного пространств)
"start" С начала
"end" С конца
"center" По центру
"between" Растянуть
"around" Равномерно
"stretch" Равномерно (с отступами)
w100 boolean На всю ширину
h100 boolean На всю высоту
gap string Отступы

Пример

JSON 

{
  "type": "bs-flex",
  "templateOptions": {
        "direction": "row",
        "wrap": "nowrap",
        "justifyContent": "start",
        "alignItems": "start",
        "alignContent": "start",
        "w100": true,
        "h100": true,
        "gap": "10px",
   }
}

Пример со свойствами флекс контейнера

Пример размещения макета

Источник — https://wiki.3v-group.net/index.php?title=Платформа_3V/Формы/Компоненты/Верстка/Контейнер&oldid=4304