Developers - CSS Layout System
Utilities Alignment
align-content
Updates property --_ac.
LOGIC: [class*="ac-"] { align-content: var(--_ac, normal); }
| Class | Value |
|---|---|
.ac-bal | baseline |
.ac-fib | first baseline |
.ac-lab | last baseline |
.ac-cen | center |
.ac-end | end |
.ac-fle | flex-end |
.ac-fls | flex-start |
.ac-spa | space-around |
.ac-spb | space-between |
.ac-spe | space-evenly |
.ac-sta | start |
.ac-str | stretch |
justify-content
Updates property --_jc
| Class | Value |
|---|---|
.jc-cen | center |
.jc-end | end |
.jc-fle | flex-end |
.jc-fls | flex-start |
.jc-lft | left |
.jc-rgt | right |
.jc-spa | space-around |
.jc-spb | space-between |
.jc-spe | space-evenly |
.jc-sta | start |
.jc-str | stretch |
justify-items
Updates property --_ji
| Class | Value |
|---|---|
.ji-cen | center |
.ji-end | end |
.ji-fle | flex-end |
.ji-fls | flex-start |
.ji-lft | left |
.ji-rgt | right |
.ji-spa | space-around |
.ji-spb | space-between |
.ji-spe | space-evenly |
.ji-sta | start |
.ji-str | stretch |
justify-self
Updates property --_js
| Class | Value |
|---|---|
.js-cen | center |
.js-end | end |
.js-fle | flex-end |
.js-fls | flex-start |
.js-lft | left |
.js-rgt | right |
.js-spa | space-around |
.js-spb | space-between |
.js-spe | space-evenly |
.js-sta | start |
text-align
Updates property --_ta
| Class | Value |
|---|---|
.ta-cen | center |
.ta-end | end |
.ta-jus | justify hyphens: auto |
.ta-jua | justify-all hyphens: auto |
.ta-lft | left |
.ta-map | match-parent |
.ta-rgt | right |
.ta-sta | start |