FlexBox

Flex Container

Элемент может быть сконфигурирован как контейнер flexbox с использованием классов p-d-flex или p-d-inline-flex.

Flex ContainerInline Flex Container

<div class="p-d-flex">Flex Container</div>
<div class="p-d-inline-flex">Inline Flex Container</div>

Direction

Значение по умолчанию применяется с использованием класса p-flex-direction, где направление может быть любым из следующих:

• row (default)
• row-reverse
• column
• column-reverse### Row

Item 1Item 2Item 3

<div class="p-d-flex">
  <div class="p-mr-2">Item 1</div>
  <div class="p-mr-2">Item 2</div>
  <div>Item 3</div>
</div>

Column

Item 1Item 2Item 3

<div class="p-d-flex p-flex-column">
  <div class="p-mb-2">Item 1</div>
  <div class="p-mb-2">Item 2</div>
  <div>Item 3</div>
</div>

Responsive

Строка для больших экранов и столбец для маленьких.

Item 1Item 2Item 3

<div class="p-d-flex p-flex-column p-flex-md-row">
  <div class="p-mb-2 p-mr-2">Item 1</div>
  <div class="p-mb-2 p-mr-2">Item 2</div>
  <div class="p-mb-2 p-mr-2">Item 3</div>
</div>

Классы Direction

• p-flex-row
• p-flex-row-reverse
• p-flex-column
• p-flex-column-reverse
• p-flex-sm-row
• p-flex-sm-row-reverse
• p-flex-sm-column
• p-flex-sm-column-reverse
• p-flex-md-row
• p-flex-md-row-reverse
• p-flex-md-column
• p-flex-md-column-reverse
• p-flex-lg-row
• p-flex-lg-row-reverse
• p-flex-lg-column
• p-flex-lg-column-reverse
• p-flex-xl-row
• p-flex-xl-row-reverse
• p-flex-xl-column
• p-flex-xl-column-reverse

Order

Порядок настраивает способ их отображения в контейнере flex. используется формат p-order-value, где значением может быть число от 0 до 6.

Customized

Item 1Item 2Item 3

<div class="p-d-flex">
  <div class="p-mr-2 p-order-3">Item 1</div>
  <div class="p-mr-2 p-order-1">Item 2</div>
  <div class="p-mr-2 p-order-2">Item 3</div>
</div>

Responsive

Порядок, меняющийся в зависимости от размера экрана.

Item 1Item 2Item 3

<div class="p-d-flex">
  <div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div>
  <div class="p-mr-2 p-order-1 p-order-md-3">Item 2</div>
  <div class="p-mr-2 p-order-2 p-order-md-1">Item 3</div>
</div>

Классы Order

• p-order-0
• p-order-1
• p-order-2
• p-order-3
• p-order-4
• p-order-5
• p-order-6
• p-order-sm-0
• p-order-sm-1
• p-order-sm-2
• p-order-sm-3
• p-order-sm-4
• p-order-sm-5
• p-order-sm-6
• p-order-md-0
• p-order-md-1
• p-order-md-2
• p-order-md-3
• p-order-md-4
• p-order-md-5
• p-order-md-6
• p-order-lg-0
• p-order-lg-1
• p-order-lg-2
• p-order-lg-3
• p-order-lg-4
• p-order-lg-5
• p-order-lg-6
• p-order-xl-0
• p-order-xl-1
• p-order-xl-2
• p-order-xl-3
• p-order-xl-4
• p-order-xl-5
• p-order-xl-6

Wrap

Flex wrap определяет поведение обертывания, когда в контейнере недостаточно места. Формат класса - p-flex-value, а поле value может быть любым из перечисленных вариантов.

• nowrap (default)
• wrap
• wrap-reverse### No Wrap

Item 1Item 2Item 3Item 4Item 5Item 6

<div class="p-d-flex">
  <div class="p-mr-2 p-mb-2">Item 1</div>
  <div class="p-mr-2 p-mb-2">Item 2</div>
  <div class="p-mr-2 p-mb-2">Item 3</div>
  <div class="p-mr-2 p-mb-2">Item 4</div>
  <div class="p-mr-2 p-mb-2">Item 5</div>
  <div class="p-mr-2 p-mb-2">Item 6</div>
</div>

Wrap

Item 1Item 2Item 3Item 4Item 5Item 6

<div class="p-d-flex p-flex-wrap">
  <div class="p-mr-2 p-mb-2">Item 1</div>
  <div class="p-mr-2 p-mb-2">Item 2</div>
  <div class="p-mr-2 p-mb-2">Item 3</div>
  <div class="p-mr-2 p-mb-2">Item 4</div>
  <div class="p-mr-2 p-mb-2">Item 5</div>
  <div class="p-mr-2 p-mb-2">Item 6</div>
</div>

Wrap Reverse

Item 1Item 2Item 3Item 4Item 5Item 6

<div class="p-d-flex p-flex-wrap-reverse">
  <div class="p-mr-2 p-mb-2">Item 1</div>
  <div class="p-mr-2 p-mb-2">Item 2</div>
  <div class="p-mr-2 p-mb-2">Item 3</div>
  <div class="p-mr-2 p-mb-2">Item 4</div>
  <div class="p-mr-2 p-mb-2">Item 5</div>
  <div class="p-mr-2 p-mb-2">Item 6</div>
</div>

Классы Wrap

• p-flex-nowrap
• p-flex-wrap
• p-flex-wrap-reverse
• p-flex-sm-nowrap
• p-flex-sm-wrap
• p-flex-sm-wrap-reverse
• p-flex-md-nowrap
• p-flex-md-wrap
• p-flex-md-wrap-reverse
• p-flex-lg-nowrap
• p-flex-lg-wrap
• p-flex-lg-wrap-reverse
• p-flex-xl-nowrap
• p-flex-xl-wrap
• p-flex-xl-wrap-reverse

Justify Content

Выравнивание содержимого - это выравнивание по главной оси, определяемое с использованием формата p-jc-value с адаптивными альтернативами. Поле значения принимает следующие параметры:

• start
• end
• center
• between
• around
• evenly### Between

Item 1Item 2

<div class="p-d-flex p-jc-between">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Center

Item 1Item 2

<div class="p-d-flex p-jc-center">
    <div class="p-mr-2">Item 1</div>
    <div>Item 2</div>
</div>

Классы Justify Content

• p-jc-start
• p-jc-end
• p-jc-center
• p-jc-between
• p-jc-around
• p-jc-evenly
• p-jc-sm-start
• p-jc-sm-end
• p-jc-sm-center
• p-jc-sm-between
• p-jc-sm-around
• p-jc-sm-evenly
• p-jc-md-start
• p-jc-md-end
• p-jc-md-center
• p-jc-md-between
• p-jc-md-around
• p-jc-md-evenly
• p-jc-lg-start
• p-jc-lg-end
• p-jc-lg-center
• p-jc-lg-between
• p-jc-lg-around
• p-jc-lg-evenly
• p-jc-xl-start
• p-jc-xl-end
• p-jc-xl-center
• p-jc-xl-between
• p-jc-xl-around
• p-jc-xl-evenly

Align Items

Конфигурация выравнивания элементов представляет собой выравнивание по поперечной оси и определяется с использованием формата p-ai-value с адаптивными альтернативами. Поле значения принимает следующие параметры:

• start
• end
• center
• baseline
• stretch (default)### Start

Item 1Item 2

<div class="p-d-flex p-ai-start">
  <div class="p-mr-2" style="height: 100px">Item 1</div>
  <div style="height: 50px">Item 2</div>
</div>

Center

Item 1Item 2

<div class="p-d-flex p-ai-center">
  <div class="p-mr-2" style="height: 100px">Item 1</div>
  <div style="height: 50px">Item 2</div>
</div>

Классы Align Items

• p-ai-start
• p-ai-end
• p-ai-center
• p-ai-baseline
• p-ai-strech
• p-ai-sm-start
• p-ai-sm-end
• p-ai-sm-center
• p-ai-sm-baseline
• p-ai-sm-strech
• p-ai-md-start
• p-ai-md-end
• p-ai-md-center
• p-ai-md-baseline
• p-ai-md-strech
• p-ai-lg-start
• p-ai-lg-end
• p-ai-lg-center
• p-ai-lg-baseline
• p-ai-lg-strech
• p-ai-xl-start
• p-ai-xl-end
• p-ai-xl-center
• p-ai-xl-baseline
• p-ai-xl-strech

Align Self

Настройка выравнивания по умолчанию - это выравнивание по поперечной оси для конкретного элемента, определяемое с использованием формата p-as-value с адаптивными альтернативами. Поле значения принимает следующие параметры.

• start
• end
• center
• baseline
• stretch (default)StartCenterEndStretch

<div class="p-d-flex" style="height: 150px">
  <div class="p-mr-2 p-as-start">Start</div>
  <div class="p-mr-2 p-as-center">Center</div>
  <div class="p-mr-2 p-as-end">End</div>
  <div class="p-mr-2 p-as-stretch">Stretch</div>
</div>

Классы Align Self

• p-as-start
• p-as-end
• p-as-center
• p-as-baseline
• p-as-strech
• p-as-sm-start
• p-as-sm-end
• p-as-sm-center
• p-as-sm-baseline
• p-as-sm-strech
• p-as-md-start
• p-as-md-end
• p-as-md-center
• p-as-md-baseline
• p-as-md-strech
• p-as-lg-start
• p-as-lg-end
• p-as-lg-center
• p-as-lg-baseline
• p-as-lg-strech
• p-as-xl-start
• p-as-xl-end
• p-as-xl-center
• p-as-xl-baseline
• p-as-xl-strech

Align Content

Выравнивание содержимого - это выравнивание по поперечной оси, определяемое с использованием формата p-ac-value с адаптивными альтернативами. Поле значения принимает следующие параметры:

• start

• end

• center

• around

• stretch

• between### Классы Align Content

• p-ac-start

• p-ac-end

• p-ac-center

• p-ac-around

• p-ac-stretch

• p-ac-between

• p-ac-sm-start

• p-ac-sm-end

• p-ac-sm-center

• p-ac-sm-around

• p-ac-sm-stretch

• p-ac-sm-between

• p-ac-md-start

• p-ac-md-end

• p-ac-md-center

• p-ac-md-around

• p-ac-md-stretch

• p-ac-md-between

• p-ac-lg-start

• p-ac-lg-end

• p-ac-lg-center

• p-ac-lg-around

• p-ac-lg-stretch

• p-ac-lg-between

• p-ac-xl-start

• p-ac-xl-end

• p-ac-xl-center

• p-ac-xl-around

• p-ac-xl-stretch

• p-ac-xl-between

Margin with FlexBox

Horizontal Spacing

Vertical Spacing

Item 1Item 2

<div class="p-d-flex p-flex-column" style="height: 150px">
  <div>Item 1</div>
  <div class="p-mt-auto">Item 2</div>
</div>