Align Content

Flex Start #

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

<dt-stack class="d-ac-flex-start">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</dt-stack>

Center #

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

<dt-stack class="d-ac-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</dt-stack>

Flex End #

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

<dt-stack class="d-ac-flex-end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</dt-stack>

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.

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

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.

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

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.

<dt-stack class="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>
</dt-stack>

Classes #