Компонент FlexContainer

Основы
PDF

FlexContainer — компонент разметки, который позволяет настроить расположение нескольких элементов последовательно в строку или колонку. Элементы могут изменять размер в зависимости от контента. Построен на базе компонента CSS Flexible Box.

Действия, которые позволяет выполнять компонент FlexContainer с элементами макета:

  • Задает направление элементов.
  • Выравнивает элементы.
  • Распределяет пространство между элементами.

Подробно о Flexible Box читайте в статье Основные понятия Flexbox.

Cвойства 

@Input direction

Указывает как flex-элементы располагаются во flex-контейнере относительно главной оси и направления.

Возможные значения
row Блоки flex-контейнера размещаются в строку.
column Блоки flex-контейнера размещаются в столбец.
row-reverse Блоки flex-контейнера размещаются в строку, но в обратном направлении.
column-reverse Блоки flex-контейнера размещаются в столбец, но в обратном направлении.
@Input justifyContent

Выравнивание вдоль главной оси. Указывает как браузер распределяет пространство между и вокруг элементов контента вдоль главной оси flex-контейнера.

Возможные значения
start Выравнивание элементов по левому краю flex-контейнера.
end Выравнивание элементов по правому краю flex-контейнера.
center Выравнивание элементов по центру flex-контейнера.
space-between Блоки flex-контейнера равномерно размещаются по всей ширине. Первый элемент выровнен по левому краю, последний — по правому.
@Input alignItems

Выравнивание по вертикали. Выравнивает элементы flex-контейнера, как и свойство @Input justifyContent, но в перпендикулярном направлении.

Возможные значения
flex-start Выравнивание элементов по верхнему краю flex-контейнера.
flex-end Выравнивание элементов по нижнему краю flex-контейнера.
center Выравнивание элементов по центру flex-контейнера.
@Input gap

Задает отступы между элементами flex-контейнера в столбцах и строках. Является сокращением для свойств row-gap (отступ между элементами строки) и column-gap (отступ между элементами столбца).

Результат настройки свойств row-gap и column-gap приведен ниже.

Результат настройки свойств row-gap и column-gap
.container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 50px;
    row-gap: 20px;
    justify-content: center;
}

Результат отображения представлен на рисунке ниже.

@Input padding

Задает внутренние отступы для контейнера. Может настраиваться как для каждой стороны отдельно, так и для всех сторон одновременно. Может принимать число, строку и возможные значения, которые приведены ниже.

Возможные значения
none Внутренний отступ отсутствует.
small Маленький размер отступа.
medium Средний размер отступа.
large Большой размер отступа.

Пример настройки свойства padding приведен ниже.

Пример настройки свойства padding
"padding": {
    "top": "6px",
    "right": 6,
    "bottom": "small",
    "left": "large"
}
@Input border-radius

Задает радиус скругления углов для контейнера. Может настраиваться как для каждой стороны отдельно, так и для всех сторон одновременно. Может принимать число, строку и возможные значения, которые приведены ниже.

Возможные значения
none Скругление углов отсутствует.
small Маленький радиус скругления углов.
medium Средний радиус скругления углов.
large Большой радиус скругления углов.

Пример настройки свойства border-radius приведен ниже.

Пример настройки свойства border-radius
"borderRadius": "medium"
@Input color

Задает цвет контейнера. В качестве значения принимает код цвета.

Пример настройки свойства color приведен ниже.

Пример настройки свойства color
"color": "#FDAB06"

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

Пример использования компонента FlexContainer в схеме представлен ниже.

Пример использования компонента FlexContainer в схеме
"name": "FlexContainer",
"values": {
    "layoutConfig": {...},
    "type": "crt.FlexContainer",
    "direction": "column",
    "justifyContent": "start",
    "alignItems": "stretch",
    "wrap": "nowrap",
    "gap": "small",
    "items": []
}
...
{
    "operation": "insert",
    "name": "Button",
    "values": {
        "type": "crt.Button",
        "caption": "#ResourceString(Button_caption)#",
        "color": "primary",
    },
    "parentName": "FlexContainer",
    "propertyName": "Items",
    "index": 0
}