-
-
Notifications
You must be signed in to change notification settings - Fork 0
Flex
Atomix provides built-in support for Flexbox, allowing you to easily manage layout positioning with simple class names.
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.
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
reverseat 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>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>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>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>Atomix provides additional utility classes to simplify common flexbox patterns.
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;