Flex
Dialtone provies the following flexbox helper and utility classes to help generate common layouts.
Flex Columns
By default children cells within a parent flex container will only take up the room needed for their content. To force a flex child cell span multiple "columns", use the following flex column .d-flex__cell{#} classes. These columns are based on a 12-column grid, meaning each column will take up 1/12th of all available space.
Classes
| Class | Span | Output |
|---|---|---|
| .d-flex__cell1 | 1 | flex-basis: 8.333% |
| .d-flex__cell2 | 2 | flex-basis: 16.667% |
| .d-flex__cell3 | 3 | flex-basis: 25% |
| .d-flex__cell4 | 4 | flex-basis: 33.333% |
| .d-flex__cell5 | 5 | flex-basis: 41.667% |
| .d-flex__cell6 | 6 | flex-basis: 50% |
| .d-flex__cell7 | 7 | flex-basis: 58.333% |
| .d-flex__cell8 | 8 | flex-basis: 66.667% |
| .d-flex__cell9 | 9 | flex-basis: 75% |
| .d-flex__cell10 | 10 | flex-basis: 83.333% |
| .d-flex__cell11 | 11 | flex-basis: 91.667% |
| .d-flex__cell12 | 12 | flex-basis: 100% |
Examples
[cell1]
[cell2]
[cell3]
[cell4]
[cell5]
[cell6]
[cell7]
[cell8]
[cell9]
[cell10]
[cell11]
[cell12]
<div class="d-flex-columns d-fw-wrap">
<div class="d-flex__cell1">…</div>
<div class="d-flex__cell2">…</div>
<div class="d-flex__cell3">…</div>
<div class="d-flex__cell4">…</div>
<div class="d-flex__cell5">…</div>
<div class="d-flex__cell6">…</div>
<div class="d-flex__cell7">…</div>
<div class="d-flex__cell8">…</div>
<div class="d-flex__cell9">…</div>
<div class="d-flex__cell10">…</div>
<div class="d-flex__cell11">…</div>
<div class="d-flex__cell12">…</div>
</div>Flex Center
By default flexed items align to flex-start both horizontally and vertically (effectively top, left). This aligns child elements center-center. Note: This only applies for direct children and does not cascade to subsequent children.
Example
.d-fl-center
<div class="d-fl-center">
…
</div>Flex Grow
The flex-grow sets the flex container’s grow factor relative to the parent's main size. Default value is 0.
| Class | Output | Description |
|---|---|---|
| .d-fl-grow0 | flex-grow: 0; | Set an item's flex grow property to 0. |
| .d-fl-grow1 | flex-grow: 1; | Set an item's flex grow property to 1. |
| .d-fl-grow2 | flex-grow: 2; | Set an item's flex grow property to 2. |
| .d-fl-grow3 | flex-grow: 3; | Set an item's flex grow property to 3. |
| .d-fl-grow4 | flex-grow: 4; | Set an item's flex grow property to 4. |
| .d-fl-grow5 | flex-grow: 5; | Set an item's flex grow property to 5. |
| .d-fl-grow-unset | flex-grow: unset; | Resets the flex-grow value to the initial value (0). |
Content cannot flex
Text that will grow
Content cannot flex
<div class="d-d-flex">
<div>…</div>
<div class="d-fl-grow1">…</div>
<div>…</div>
</div>Flex Shrink
The flex-shrink sets the flex container’s shrink factor relative to the parent's main size. Default value is 1.
| Class | Output | Description |
|---|---|---|
| .d-fl-shrink0 | flex-shrink: 0; | Set an item's flex shrink property to 0. |
| .d-fl-shrink1 | flex-shrink: 1; | Set an item's flex shrink property to 1. |
| .d-fl-shrink2 | flex-shrink: 2; | Set an item's flex shrink property to 2. |
| .d-fl-shrink3 | flex-shrink: 3; | Set an item's flex shrink property to 3. |
| .d-fl-shrink4 | flex-shrink: 4; | Set an item's flex shrink property to 4. |
| .d-fl-shrink5 | flex-shrink: 5; | Set an item's flex shrink property to 5. |
| .d-fl-shrink-unset | flex-shrink: unset; | Resets the flex-shrink value to the initial value (1). |
Longer text that cannot flex
Text that will shrink even if it causes text to wrap
Longer text that cannot flex
<div class="d-d-flex">
<div>…</div>
<div class="d-fl-shrink1">…</div>
<div>…</div>
</div>Flex
The flex CSS property is shorthand for flex-grow, flex-shrink, and flex-basis. If only two values are provided, the flex-grow value is assumed for flex-shrink. You can also control the grow and shrink flex values by using the classes provided.
| Class | Output | Description |
|---|---|---|
| .d-fl0 | flex: 0 auto; | Set an item's flex-basis to auto and flex-grow and flex-shrink values to 0. |
| .d-fl1 | flex: 1 auto; | Set an item's flex-basis to auto and flex-grow and flex-shrink values to 1. |
| .d-fl2 | flex: 2 auto; | Set an item's flex-basis to auto and flex-grow and flex-shrink values to 2. |
| .d-fl3 | flex: 3 auto; | Set an item's flex-basis to auto and flex-grow and flex-shrink values to 3. |
| .d-fl4 | flex: 4 auto; | Set an item's flex-basis to auto and flex-grow and flex-shrink values to 4. |
| .d-fl5 | flex: 5 auto; | Set an item's flex-basis to auto and flex-grow and flex-shrink values to 5. |
| .d-fl-unset | flex: unset; | Resets the flex value to the initial value (0 1 auto). |
Content cannot flex
Text that will flex
Content cannot flex
<div class="d-d-flex">
<div>…</div>
<div class="d-fl1">…</div>
<div>…</div>
</div>Flex Direction
The flex-direction sets the flex container’s main axis direction. Default value is row.
| Class | Output | Description |
|---|---|---|
| .d-fd-row | flex-direction: row | Sets the container's flex direction to row. This is the initial value. |
| .d-fd-row-reverse | flex-direction: row-reverse | Reverses the containers flex direction, but still in a row. |
| .d-fd-column | flex-direction: column | Sets the container's flex direction to a column. |
| .d-fd-column-reverse | flex-direction: column-reverse | Sets the container's flex direction to a column and reverses it. |
| .d-fd-unset | flex-direction: unset; | Resets the flex-direction value to its initial value (row). |
1
2
3
.d-fd-row
1
2
3
.d-fd-row-reverse
1
2
3
.d-fd-column
1
2
3
.d-fd-column-reverse
<div class="d-d-flex d-fd-row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="d-d-flex d-fd-row-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="d-d-flex d-fd-column">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="d-d-flex d-fd-column-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>Flex Wrap
The flex-wrap sets the flex container’s wrapping status. Default value is nowrap.
| Class | Output | Description |
|---|---|---|
| .d-fw-nowrap | flex-wrap: nowrap | Declares a container's objects should not wrap. This is the initial value. |
| .d-fw-wrap | flex-wrap: wrap | Declares a container's objects should wrap to another row or column (depending on the declared direction) based on content size. |
| .d-fw-wrap-reverse | flex-wrap: wrap-reverse | Reverses the wrap direction for container's objects, but on a row or column level. It does not re-order the content, but reverses the order of each row or column. More than one row or column must be present for this to visually apply. |
| .d-fw-unset | flex-wrap: unset; | Resets the flex-wrap value to its initial value (nowrap). |
1 - [.d-flex__cell5]
2 - [.d-flex__cell5]
3 - [.d-flex__cell5]
.d-fw-nowrap
1 - [.d-flex__cell5]
2 - [.d-flex__cell5]
3 - [.d-flex__cell5]
.d-fw-wrap
1 - [.d-flex__cell5]
2 - [.d-flex__cell5]
3 - [.d-flex__cell5]
.d-fw-wrap-reverse
<div class="d-d-flex d-fw-nowrap">
<div class="d-flex__cell5">1</div>
<div class="d-flex__cell5">2</div>
<div class="d-flex__cell5">3</div>
</div>
<div class="d-d-flex d-fw-wrap">
<div class="d-flex__cell5">1</div>
<div class="d-flex__cell5">2</div>
<div class="d-flex__cell5">3</div>
</div>
<div class="d-d-flex d-fw-wrap-reverse">
<div class="d-flex__cell5">1</div>
<div class="d-flex__cell5">2</div>
<div class="d-flex__cell5">3</div>
</div>Flex Flow
The flex-flow CSS property is a shorthand property that sets allows you to quickly set the above flex-direction and flex-wrap properties. By default all flex containers are set to row and nowrap.
| Class | Output | Description |
|---|---|---|
| .d-ff-row-nowrap | flex-flow: row nowrap; | Sets the direction to row, but does not allow child items to wrap. This is the default flex-flow value. |
| .d-ff-row-wrap | flex-flow: row wrap; | Establishes the layout as horizontal rows that display left to right in `ltr` and wraps onto multiple lines top to bottom. |
| .d-ff-row-wrap-reverse | flex-flow: row wrap-reverse; | Sets the direction to row and reverses the order of each row. |
| .d-ff-row-reverse-nowrap | flex-flow: row-reverse nowrap; | Sets the direction to row, but reverses the order of all child items. Child items will not be allowed to wrap to another row. |
| .d-ff-row-reverse-wrap | flex-flow: row-reverse wrap; | Sets the direction to row, but reverses the order of all child items. Child items are allowed to wrap to another row. |
| .d-ff-row-reverse-wrap-reverse | flex-flow: row-reverse wrap-reverse; | Reverses both the overall order of all child elements as well as each row. |
| .d-ff-column-nowrap | flex-flow: column nowrap; | Sets the direction to column, but does not allow child items to wrap. This is the default flex-flow value. |
| .d-ff-column-wrap | flex-flow: column wrap; | Establishes the layout as horizontal columns that display top to bottom in `ltr` and wraps onto multiple columns left to right. |
| .d-ff-column-wrap-reverse | flex-flow: column wrap-reverse; | Sets the direction to column and reverses the order of each distinct columm. It does not reverse the overall order of child elements. |
| .d-ff-column-reverse-nowrap | flex-flow: column-reverse nowrap; | Sets the direction to column, but reverses the order of all child items. Child items will not be allowed to wrap to another column. |
| .d-ff-column-reverse-wrap | flex-flow: column-reverse wrap; | Sets the direction to column, but reverses the order of all child items. Child items are allowed to wrap to another column. |
| .d-ff-column-reverse-wrap-reverse | flex-flow: column-reverse wrap-reverse; | Reverses both the overall order of all child elements as well as each column. |
| .d-ff-unset | flex-flow: unset; | Resets the flex-flow value to its initial value (row nowrap). |
Justify Content
The justify-content CSS property sets how space around and between content is distributed a flex container’s main axis.
| Class | Output | Description |
|---|---|---|
| .d-jc-flex-start | justify-content: flex-start; | Items are packed from the start of the flex-direction. |
| .d-jc-flex-end | justify-content: flex-end; | Items are packed from the end of the flex-direction. |
| .d-jc-center | justify-content: center; | Items are packed around the center of the flex-direction. |
| .d-jc-space-around | justify-content: space-around; | Items are evenly distributed within the container along the main axis. The spacing between adjacent items are the same. The empty space before the first item and after the last is half the space of adjacent items. |
| .d-jc-space-between | justify-content: space-between; | Items are evenly distributed within the container along the main axis. The spacing between adjacent items are the same. The first and last items are flush with the main-start and main-end edges, respectively. |
| .d-jc-space-evenly | justify-content: space-evenly; | Items are evenly distributed within the container along the main axis. The spacing between adjacent items, before the first item, and after the last item is the same. |
| .d-jc-baseline | justify-content: baseline; | Items are placed along the flex container's baseline alignment. |
| .d-jc-normal | justify-content: normal; | Items are distributed in their default position as if no justify-content has been applied. In flex containers this behaves as stretch. |
| .d-jc-unset | justify-content: unset; | Resets the justify-content to its initial value. |
1
2
3
.d-jc-center
1
2
3
.d-jc-flex-start
1
2
3
.d-jc-flex-end
1
2
3
.d-jc-space-evenly
1
2
3
.d-jc-space-between
1
2
3
.d-jc-space-around
1
2
3
.d-jc-baseline
1
2
3
.d-jc-unset
<div class="d-d-flex d-jc-center">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
<div class="d-d-flex d-jc-flex-start">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
<div class="d-d-flex d-jc-flex-end">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
<div class="d-d-flex d-jc-space-evenly">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
<div class="d-d-flex d-jc-space-between">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
<div class="d-d-flex d-jc-space-around">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
<div class="d-d-flex d-jc-baseline">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
<div class="d-d-flex d-jc-unset">
<div>…</div>
<div>…</div>
<div>…</div>
</div>Align Items
The align-items CSS property sets how child elements are distributed along the flex container’s cross axis.
| Class | Output | Description |
|---|---|---|
| .d-ai-flex-start | align-items: flex-start; | Items are packed from the start of the cross-axis. |
| .d-ai-flex-end | align-items: flex-end; | Items are packed from the end of the cross-axis. |
| .d-ai-center | align-items: center; | Items are packed from the center of the cross-axis. |
| .d-ai-baseline | align-items: baseline; | Items are placed along the flex container's baseline alignment. |
| .d-ai-stretch | align-items: stretch; | Items are stretched along the cross-axis. |
| .d-ai-normal | align-items: normal; | Items are distributed in their default position as if no align-items has been applied. In flex containers this behaves as stretch. |
| .d-ai-unset | align-items: unset; | Resets the align-items to its initial value. |
1
2
3
4
.d-ai-flex-start
1
2
3
4
.d-ai-flex-end
1
2
3
4
.d-ai-center
<div class="d-d-flex d-ai-center">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
<div class="d-d-flex d-ai-flex-start">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
<div class="d-d-flex d-ai-flex-end">
<div>…</div>
<div>…</div>
<div>…</div>
</div>Align Content
The align-content CSS property sets how space around and between content is distributed a flex container’s cross axis.
| Class | Output | Description |
|---|---|---|
| .d-ac-flex-start | align-content: flex-start; | Items are packed from the start of the cross-axis. |
| .d-ac-flex-end | align-content: flex-end; | Items are packed from the end of the cross-axis. |
| .d-ac-center | align-content: center; | Items are packed from the center of the cross-axis. |
| .d-ac-space-around | align-content: space-around; | Items are evenly distributed within the container along the cross axis. The spacing between adjacent items are the same. The empty space before the first item and after the last is half the space of adjacent items. |
| .d-ac-space-between | align-content: space-between; | Items are evenly distributed within the container along the cross axis. The spacing between adjacent items are the same. The first and last items are flush with the main-start and main-end edges, respectively. |
| .d-ac-space-evenly | align-content: space-evenly; | Items are evenly distributed within the container along the cross axis. The spacing between adjacent items, before the first item, and after the last item is the same. |
| .d-ac-baseline | align-content: baseline; | Items are placed along the flex container's baseline alignment. |
| .d-ac-stretch | align-content: stretch; | Items are stretched to fill the container space. |
| .d-ac-normal | align-content: normal; | Items are distributed in their default position as if no align-content has been applied. |
| .d-ac-unset | align-content: unset; | Resets the align-content to its initial value. |
1
2
3
4
.d-ac-flex-start
1
2
3
4
.d-ac-flex-end
1
2
3
4
.d-ac-center
1
2
3
4
.d-ac-space-around
1
2
3
4
.d-ac-space-between
1
2
3
4
.d-ac-space-evenly
<div class="d-d-flex d-ac-flex-start">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
<div class="d-d-flex d-ac-flex-end">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
<div class="d-d-flex d-ac-center">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
<div class="d-d-flex d-ac-space-around">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
<div class="d-d-flex d-ac-space-between">
<div>…</div>
<div>…</div>
<div>…</div>
</div>
<div class="d-d-flex d-ac-space-evenly">
<div>…</div>
<div>…</div>
<div>…</div>
</div>Align Self
The align-self CSS property sets how a child element is placed along the flex container’s cross axis.
| Class | Output | Description |
|---|---|---|
| .d-as-flex-start | align-self: flex-start; | Puts an item at the start of the cross-axis. |
| .d-as-flex-end | align-self: flex-end; | Puts an item at the end of the cross-axis. |
| .d-as-center | align-self: center; | Puts an item at the center of the cross-axis. |
| .d-as-baseline | align-self: baseline; | Item is placed on the container's baseline alignment. |
| .d-as-stretch | align-self: stretch; | Item is stretched along the cross-axis. |
| .d-as-normal | align-self: normal; | Item is set in it's default position as if no align-self has been applied. In flex containers this behaves as stretch. |
| .d-as-auto | align-self: auto; | Item is set to the parent's align-items value. |
| .d-as-unset | align-self: unset; | Resets the align-self to its initial value. |
.d-as-flex-end
.d-as-flex-start
.d-as-flex-end
.d-as-flex-end
.d-as-stretch
.d-as-center
.d-as-stretch
.d-as-stretch
<div class="d-d-flex">
<div class="d-as-flex-end">…</div>
<div class="d-as-flex-start">…</div>
<div class="d-as-flex-end">…</div>
<div class="d-as-flex-end">…</div>
</div>
<div class="d-d-flex">
<div class="d-as-flex-end">…</div>
<div class="d-as-flex-center">…</div>
<div class="d-as-flex-end">…</div>
<div class="d-as-flex-end">…</div>
</div>Order
By default items are placed in their DOM order. You can re-order them though if you wish. Dialtone provides two commonly used positions: first and last.
1
2
3
4 .d-order-first
1 .d-order-last
2
3
4
<div class="d-d-flex d-jc-center">
<div>…</div>
<div>…</div>
<div>…</div>
<div class="d-order-first">…</div>
</div>
<div class="d-d-flex d-jc-flex-start">
<div class="d-order-last">…</div>
<div>…</div>
<div>…</div>
<div>…</div>
</div>