flexLayout

flexLayout располагает дочерние компоненты с помощью CSS-модели Flexbox.

XML-элемент

flexLayout

Java-класс

FlexLayout

Основы

ДЕМО

В примере показано, как flexDirection, alignItems, justifyContent и flexWrap управляют расположением дочерних компонентов. У flexLayout нет заданных по умолчанию ширины и высоты.

<flexLayout alignItems="CENTER" flexDirection="ROW"
            justifyContent="CENTER" flexWrap="WRAP"
            classNames="flex-with-gap">
    <span text="Span"/>
    <textField placeholder="TextField"/>
    <button text="Button"/>
    <button text="Button"/>
</flexLayout>

Расположение содержимого

Атрибут contentAlignment соответствует CSS-свойству align-content. Он задаёт выравнивание строк внутри flex-контейнера по поперечной оси, когда есть свободное пространство. Его действие похоже на выравнивание отдельных элементов по главной оси с помощью justify-content.

Свойство влияет только на многострочные flex-контейнеры, в которых flex-wrap имеет значение wrap или wrap-reverse. Оно не влияет на однострочный контейнер со значением по умолчанию flex-wrap: nowrap.

START

Строки располагаются в начале контейнера.

flex layout start
XML-код 
<flexLayout contentAlignment="START"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em"
            minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

CENTER

Строки располагаются по центру контейнера.

flex layout center
XML-код 
<flexLayout contentAlignment="CENTER"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em"
            minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

END

Строки располагаются в конце контейнера.

flex layout end
XML-код 
<flexLayout contentAlignment="END"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em"
            minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

STRETCH

Строки растягиваются, заполняя доступное пространство по поперечной оси.

flex layout stretch
XML-код 
<flexLayout contentAlignment="STRETCH"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em" minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em" height="AUTO"/>
    <button text="Button" width="9em" height="AUTO"/>
    <button text="Button" width="9em" height="AUTO"/>
</flexLayout>

SPACE_BETWEEN

Строки распределяются равномерно: первая прижата к началу контейнера, последняя — к концу.

flex layout space between
XML-код 
<flexLayout contentAlignment="SPACE_BETWEEN"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em" minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

SPACE_AROUND

Строки распределяются равномерно, а отступы в начале и конце равны половине расстояния между строками.

flex layout space around
XML-код 
<flexLayout contentAlignment="SPACE_AROUND"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em" minHeight="10em"
            flexWrap="WRAP">
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
    <button text="Button" width="9em"/>
</flexLayout>

Расширение компонента

Укажите в expand идентификатор дочернего компонента, чтобы установить для него значение flex-grow, равное 1. Благодаря этому компонент займёт оставшееся пространство по главной оси.

<flexLayout id="flexLayout"
            flexDirection="COLUMN"
            expand="button"
            height="100%"
            width="100%">
    <button text="Button"/>
    <button id="button" text="Button"/>
    <button text="Button"/>
</flexLayout>

Расположение flex-элементов

Атрибут flexDirection сопоставляется с CSS-свойством flex-direction. Это свойство определяет направление размещения flex-элементов внутри flex-контейнера, которое определяет главную ось и направление (прямое или обратное).

ROW

Элементы отображаются горизонтально, как строка.

flex direction row
XML-код 
<flexLayout flexDirection="ROW"
            css="gap: 0.5em">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

ROW_REVERSE

Элементы отображаются горизонтально, как строка в обратном порядке.

flex direction row reverse
XML-код 
<flexLayout flexDirection="ROW_REVERSE"
            css="gap: 0.5em">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

COLUMN

Элементы отображаются вертикально, как столбец.

flex direction column
XML-код 
<flexLayout flexDirection="COLUMN">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

COLUMN_REVERSE

Элементы отображаются вертикально, как столбец в обратном порядке.

flex direction column reverse
XML-код 
<flexLayout flexDirection="COLUMN_REVERSE">
    <button text="Button 1"/>
    <button text="Button 2"/>
    <button text="Button 3"/>
</flexLayout>

Перенос flex-элементов

Атрибут flexWrap сопоставляется с CSS-свойством flex-wrap. Он определяет, будут ли flex-элементы располагаться на одной строке или могут переходить на несколько строк. Если разрешен перенос, он также задает направление, в котором строки будут располагаться друг над другом.

NOWRAP

Flex-элементы располагаются в одну строку, что может привести к переполнению flex-контейнера.

flex wrap nowrap
XML-код 
<flexLayout flexWrap="NOWRAP"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em">
    <button text="Button 1" width="9em"/>
    <button text="Button 2" width="9em"/>
    <button text="Button 3" width="9em"/>
</flexLayout>

WRAP

Flex-элементы переходят на несколько строк.

flex wrap wrap
XML-код 
<flexLayout flexWrap="WRAP"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em">
    <button text="Button 1" width="9em"/>
    <button text="Button 2" width="9em"/>
    <button text="Button 3" width="9em"/>
</flexLayout>

WRAP_REVERSE

Flex-элементы переходят на несколько строк в обратном порядке.

flex wrap wrap reverse
XML-код 
<flexLayout flexWrap="WRAP_REVERSE"
            css="gap: 0.5em; border: 1px solid #ccc;"
            width="20em">
    <button text="Button 1" width="9em"/>
    <button text="Button 2" width="9em"/>
    <button text="Button 3" width="9em"/>
</flexLayout>

Режим JustifyContent

Атрибут justifyContent соответствует CSS-свойству justify-content. Это свойство определяет, как браузер распределяет пространство между и вокруг элементов контента вдоль главной оси flex-контейнера.

Значение Описание

START (по умолчанию)

Элементы размещаются в начале контейнера.

CENTER

Элементы размещаются в центре контейнера.

END

Элементы размещаются в конце контейнера.

BETWEEN

Элементы располагаются с равными интервалами между ними: первый прижат к началу контейнера, последний — к концу.

AROUND

Элементы равномерно размещаются в линии с равным пространством вокруг них. Обратите внимание, что промежутки в начале и конце равны половине размера пространства между каждым элементом.

EVENLY

Элементы размещаются так, чтобы пространство между любыми двумя элементами (и пространство до краев) было равным.

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

Атрибуты

В Jmix есть множество общих атрибутов, которые выполняют одну и ту же функцию для всех компонентов. Ниже приведены атрибуты, специфичные для flexLayout.

Имя Описание По умолчанию

contentAlignment

Задаёт выравнивание строк flex-контейнера. См. Расположение содержимого.

STRETCH

expand

Задаёт идентификатор дочернего компонента, который расширяется и занимает оставшееся пространство. См. Расширение компонента.

—

flexDirection

Устанавливает свойство контейнера flex-direction. Смотрите Расположение flex-элементов.

ROW

flexWrap

Устанавливает свойство контейнера flex-wrap. Смотрите Перенос flex-элементов.

NOWRAP

justifyContent

Устанавливает режим выравнивания содержимого, используемый этим контейнером. Смотрите Режим JustifyContent.

START

Обработчики

В Jmix существует множество общих обработчиков, которые конфигурируются одинаково для всех компонентов. Ниже приведены обработчики, специфичные для flexLayout:

Имя Описание

clickListener

Вызывает событие com.vaadin.flow.component.ClickEvent с объектом click. Это событие срабатывает при каждом клике по контейнеру. Для програмной регистрации обработчика события используйте метод компонента addClickListener().

doubleClickListener

Вызывает событие com.vaadin.flow.component.ClickEvent с объектом doubleClick. Это событие срабатывает, когда пользователь дважды кликает по контейнеру с небольшим интервалом времени. Для програмной регистрации обработчика события используйте метод компонента addDoubleClickListener().

singleClickListener

Вызывает событие com.vaadin.flow.component.ClickEvent с объектом singleClick. Событие срабатывает после таймаута, чтобы убедиться, что это не двойной клик. Чтобы зарегистрировать обработчик события программно, используйте метод компонента addSingleClickListener().

Элементы

flexLayout может содержать компоненты и контейнеры, расположенные в соответствии с его flex-свойствами.