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>