Dialtone

Align Content

Utilities for setting how rows are distributed along it's cross axis. This property only works when a parent container has more than one line.

Classes

ClassOutput
.d-ac-flex-startalign-content: flex-start
.d-ac-flex-endalign-content: flex-end
.d-ac-centeralign-content: center
.d-ac-space-aroundalign-content: space-around
.d-ac-space-betweenalign-content: space-between
.d-ac-space-evenlyalign-content: space-evenly
.d-ac-baselinealign-content: baseline
.d-ac-stretchalign-content: stretch
.d-ac-normalalign-content: normal
.d-ac-unsetalign-content: unset

Flex Start

Use d-ac-flex-start to pack rows against the start of the element's cross axis. This is the default value.

<div class="d-d-flex d-ac-flex-start">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Center

Use d-ac-center to pack rows along the center of the element's cross axis.

<div class="d-d-flex d-ac-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Flex End

Use d-ac-flex-end to rack rows against the end of the element's main axis.

<div class="d-d-flex d-ac-flex-end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Space Around

Use d-ac-space-around to pack rows along the element's cross axis so that there is an equal amount of space on each side of the item. This effectively takes all available space, divides it for each row, placing half of alotted space on either side of the row. This is why the space appears doubled for interior rows versus end rows.

<div class="d-d-flex d-ac-space-around">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Space Between

Use d-ac-space-between to distribute rows along the element's cross axis so that there is an equal amount of space between each row without inserting any space between the first or last object.

<div class="d-d-flex d-ac-space-between">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Space Evenly

Use d-ac-space-evenly to distribute rows along the element's cross axis so that there is an equal amount of space on each side of the rows, but unlike d-ac-space-around the space visually looks evenly distributed between objects.

<div class="d-d-flex d-ac-space-evenly">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
Last Updated: