Flex

Atomix provides built-in support for Flexbox, allowing you to easily manage layout positioning with simple class names.

Using Flex

To enable flexbox on an element (e.g., a <div>), simply add the flex class:

<div class="flex">
  I am now using flex!
</div>

This applies display: flex; to the element, making it a flex container.

Flex Direction

With Atomix, you can control the flex-direction property on any element using the flex class. To apply a specific direction, use one of the following classes:

• Row (default): row

• Row reversed: row reverse

• Column: column

• Column reversed: column reverse

If you want to reverse the direction, simply add reverse at the end of the class!

Example usage:

<div class="flex row">
  I am in a row!
</div>

<div class="flex column reverse">
  I am in a reversed column!
</div>

Justify Content

To align flex items along the main axis (horizontally in a row, vertically in a column), use the following classes:

• Start (default): justify-content-start

• End: justify-content-end

• Center: justify-content-center

• Space Between: justify-content-between

• Space Around: justify-content-around

• Space Evenly: justify-content-evenly

Example:

<div class="flex justify-content-center">
  Centered content!
</div>

Align Items

To align items along the cross axis (vertically in a row, horizontally in a column), use these classes:

• Start: align-items-start

• End: align-items-end

• Center: align-items-center

• Baseline: align-items-baseline

• Stretch (default): align-items-stretch

Example:

<div class="flex align-items-center">
  Vertically centered content!
</div>

Align Self

To control the alignment of a single flex item within a flex container, use the align-self classes:

• Start: align-self-start

• End: align-self-end

• Center: align-self-center

• Baseline: align-self-baseline

• Stretch: align-self-stretch

Example:

<div class="flex">
  <div class="align-self-center">I am centered inside the flex container!</div>
</div>

Special Flex Features

Atomix provides additional utility classes to simplify common flexbox patterns.

Flex Center

To center content both horizontally and vertically inside a flex container, use the flex-center class. This eliminates the need for separate justify-content-center and align-items-center classes.

<div class="flex flex-center">
  I am perfectly centered!
</div>

This is equivalent to:

display: flex;
justify-content: center;
align-items: center;