Skip to main content

Flexbox

View page as Markdown

Flex Container

Direction

Applicable to flex containers (env-flex) to set direction of flex items. Modifier classes are named using the format: env-flex--direction-{value}

Valid modifier values

  • row-reverse
  • column
  • column-reverse

Examples

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
<div class="example-flex env-flex">
   <div class="env-flex__item">Item 1</div>
   <div class="env-flex__item">Item 2</div>
   <div class="env-flex__item">Item 3</div>
</div>

<div class="example-flex env-flex env-flex--direction-row-reverse">
   <div class="env-flex__item">Item 1</div>
   <div class="env-flex__item">Item 2</div>
   <div class="env-flex__item">Item 3</div>
</div>

<div class="example-flex env-flex env-flex--direction-column">
   <div class="env-flex__item">Item 1</div>
   <div class="env-flex__item">Item 2</div>
   <div class="env-flex__item">Item 3</div>
</div>

<div class="example-flex env-flex env-flex--direction-column-reverse">
   <div class="env-flex__item">Item 1</div>
   <div class="env-flex__item">Item 2</div>
   <div class="env-flex__item">Item 3</div>
</div>

Justify content

Applicable to flex containers (env-flex). Modifier classes are named using the format: env-flex--justify-content-{value}

Valid values

  • end
  • center
  • between
  • around

Examples

Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
<div class="example-flex example-flex--align env-flex">
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--justify-content-center"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--justify-content-end"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--justify-content-around"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--justify-content-between"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

Align items

Applicable to flex containers (env-flex). Modifier classes are named using the format: env-flex--align-items-{value}

Valid values

  • stretch
  • start
  • end
  • center
  • baseline
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
<div
   class="example-flex example-flex--align env-flex env-flex--align-items-stretch"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--align-items-center"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--align-items-start"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--align-items-end"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

<div
   class="example-flex example-flex--align env-flex env-flex--align-items-baseline"
>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
</div>

Flex wrap

Modifiers applicable to flex containers (env-flex).

Valid modifiers:

  • env-flex--wrap
  • env-flex--wrap-reverse
1
2
3
4
1
2
3
4
1
2
3
4
<div class="example-flex env-flex">
   <div class="env-flex__item env-w--50">1</div>
   <div class="env-flex__item env-w--50">2</div>
   <div class="env-flex__item env-w--50">3</div>
   <div class="env-flex__item env-w--50">4</div>
</div>

<div class="example-flex env-flex env-flex--wrap">
   <div class="env-flex__item env-w--50">1</div>
   <div class="env-flex__item env-w--50">2</div>
   <div class="env-flex__item env-w--50">3</div>
   <div class="env-flex__item env-w--50">4</div>
</div>

<div class="example-flex env-flex env-flex--wrap-reverse">
   <div class="env-flex__item env-w--50">1</div>
   <div class="env-flex__item env-w--50">2</div>
   <div class="env-flex__item env-w--50">3</div>
   <div class="env-flex__item env-w--50">4</div>
</div>

Flex gap 2025.07.1

Modifiers applicable to flex containers (env-flex).

Valid modifiers:

  • env-flex--gap-{value}
  • env-flex--column-gap-{value}
  • env-flex--row-gap-{value}

Valid values

xxx-small (0.125em), xx-small (0.25em), x-small (0.5em), small (0.75em), medium (1em), large (1.5em), x-large (2em), xx-large (3em), xxx-large (4em)

1
2
3
<div class="example-flex env-flex env-flex--gap-medium">
   <div class="env-flex__item env-flex__item--length-1">1</div>
   <div class="env-flex__item env-flex__item--length-1">2</div>
   <div class="env-flex__item env-flex__item--length-1">3</div>
</div>

Flex Items

Align self

Applicable to direct children within a flex container (env-flex__item). Modifier classes are named using the format: env-flex__item--align-{value}

Valid values

  • stretch
  • start
  • end
  • center
  • baseline
Item
Aligned
Item
Item
Aligned
Item
Item
Aligned
Item
Item
Aligned
Item
Item
Aligned
Item
<div class="example-flex example-flex--align env-flex">
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item env-flex__item--align-stretch">Aligned</div>
   <div class="env-flex__item">Item</div>
</div>

<div class="example-flex example-flex--align env-flex">
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item env-flex__item--align-start">Aligned</div>
   <div class="env-flex__item">Item</div>
</div>

<div class="example-flex example-flex--align env-flex">
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item env-flex__item--align-end">Aligned</div>
   <div class="env-flex__item">Item</div>
</div>

<div class="example-flex example-flex--align env-flex">
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item env-flex__item--align-center">Aligned</div>
   <div class="env-flex__item">Item</div>
</div>

<div class="example-flex example-flex--align env-flex">
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item env-flex__item--align-baseline">Aligned</div>
   <div class="env-flex__item">Item</div>
</div>

Flex length (flex property)

Applicable to direct children within a flex container (env-flex__item). Used to specify the length of the flex item, relative to the rest of the flex items inside the same container. Modifier classes are named using the format: env-flex__item--length-{value}

Valid values 1-10

Sidebar
Main
Sidebar
<div class="example-flex env-flex">
   <div class="env-flex__item env-flex__item--length-1">Sidebar</div>
   <div class="env-flex__item env-flex__item--length-2">Main</div>
   <div class="env-flex__item env-flex__item--length-1">Sidebar</div>
</div>

Flex grow (flex-grow property)

Applicable to direct children within a flex container (env-flex__item). Used to specify how much the item will grow relative to the rest flex items inside the same container. Modifier classes are named using the format: env-flex__item--grow-{value}

Valid values 1-10

Item
Item
Item
<div class="example-flex env-flex">
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item">Item</div>
   <div class="env-flex__item env-flex__item--grow-1">Item</div>
</div>

Deprecated

List of deprecated class names

Envision documentation