Flexbox
Direction
Applicable to flex containers (display: flex
) to set direction of flex items. Utility classes are named using the format: env-flex--{value}
Valid values
row-reverse
column
column-reverse
Examples
<div class="example-direction-container">
<div class="env-p-around--x-small">Item 1</div>
<div class="env-p-around--x-small">Item 2</div>
<div class="env-p-around--x-small">Item 3</div>
</div>
<div class="example-direction-container env-flex--row-reverse">
<div class="env-p-around--x-small">Item 1</div>
<div class="env-p-around--x-small">Item 2</div>
<div class="env-p-around--x-small">Item 3</div>
</div>
<div class="example-direction-container env-flex--column">
<div class="env-p-around--x-small">Item 1</div>
<div class="env-p-around--x-small">Item 2</div>
<div class="env-p-around--x-small">Item 3</div>
</div>
<div class="example-direction-container env-flex--column-reverse">
<div class="env-p-around--x-small">Item 1</div>
<div class="env-p-around--x-small">Item 2</div>
<div class="env-p-around--x-small">Item 3</div>
</div>
Alignment
Justify content
Applicable to flex containers (display: flex
). Utility classes are named using the format: env-justify-content--{value}
Valid values
end
center
between
around
Examples
<div class="example-alignment-container">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
</div>
<div class="example-alignment-container env-justify-content--center">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
</div>
<div class="example-alignment-container env-justify-content--end">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
</div>
<div class="example-alignment-container env-justify-content--around">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
</div>
<div class="example-alignment-container env-justify-content--between">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
</div>
Align items
Applicable to flex containers (display: flex
). Utility classes are named using the format: env-align-items--{value}
Valid values
stretch
start
end
center
baseline
<div class="example-alignment-container env-align-items--stretch">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
</div>
<div class="example-alignment-container env-align-items--center">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
</div>
<div class="example-alignment-container env-align-items--start">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
</div>
<div class="example-alignment-container env-align-items--end">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
</div>
<div class="example-alignment-container env-align-items--baseline">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small">Item</div>
</div>
Align self
Applicable to flex items (items within a flex container). Utility classes are named using the format: env-align-self--{value}
Valid values
stretch
start
end
center
baseline
<div class="example-alignment-container">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small env-align-self--stretch">Aligned</div>
<div class="env-p-around--x-small">Item</div>
</div>
<div class="example-alignment-container">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small env-align-self--start">Aligned</div>
<div class="env-p-around--x-small">Item</div>
</div>
<div class="example-alignment-container">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small env-align-self--end">Aligned</div>
<div class="env-p-around--x-small">Item</div>
</div>
<div class="example-alignment-container">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small env-align-self--center">Aligned</div>
<div class="env-p-around--x-small">Item</div>
</div>
<div class="example-alignment-container">
<div class="env-p-around--x-small">Item</div>
<div class="env-p-around--x-small env-align-self--baseline">Aligned</div>
<div class="env-p-around--x-small">Item</div>
</div>
Flex length (flex
property)
Applicable to flex items (items within a flex container). Used to specify the length of the flex item, relative to the rest of the flex items inside the same container. Utility classes are named using the format: env-flex-length--{value}
Valid values 1-10
<div class="env-d--flex">
<div class="env-flex-length--1 example-list-item">Sidebar</div>
<div class="env-flex-length--2 example-list-item">Main</div>
<div class="env-flex-length--1 example-list-item">Sidebar</div>
</div>
Flex grow (flex-grow
property)
Applicable to flex items (items within a flex container). Used to specify how much the item will grow relative to the rest flex items inside the same container. Utility classes are named using the format: env-flex-grow--{value}
Valid values 1-10
<div class="env-d--flex">
<div class="example-list-item">Item</div>
<div class="example-list-item">Item</div>
<div class="env-flex-grow--1 example-list-item">Item</div>
</div>
Flex wrap (flex-wrap
property)
Applicable to flex containers (display: flex
). Used to specify whether flex items should wrap onto multiple
lines. Utility classes are named using the format: env-flex-wrap--{value}
Valid values
nowrap
wrap
wrap-reverse
<div class="env-d--flex env-flex-wrap--nowrap env-m-bottom--small">
<div class="example-list-item env-w--50">1</div>
<div class="example-list-item env-w--50">2</div>
<div class="example-list-item env-w--50">3</div>
<div class="example-list-item env-w--50">4</div>
</div>
<div class="env-d--flex env-flex-wrap--wrap env-m-bottom--small">
<div class="example-list-item env-w--50">1</div>
<div class="example-list-item env-w--50">2</div>
<div class="example-list-item env-w--50">3</div>
<div class="example-list-item env-w--50">4</div>
</div>
<div class="env-d--flex env-flex-wrap--wrap-reverse">
<div class="example-list-item env-w--50">1</div>
<div class="example-list-item env-w--50">2</div>
<div class="example-list-item env-w--50">3</div>
<div class="example-list-item env-w--50">4</div>
</div>