Getting Started
Layout
Components
Design
Flex
Flex helper:
| Class Name | Description |
|---|---|
| .null-flex | Add display flex , justify content center and align item center to your element |
| .null-align-items-start | Add align item start to your flex element. |
| .null-align-items-unset | Add align item unset to your flex element. |
| .null-align-items-inherit | Add align item inherit to your flex element. |
| .null-align-items-center | Add align item center to your flex element. |
| .null-align-items-baseline | Add align item baseline to your flex element. |
| .null-align-items-end | Add align item end to your flex element. |
| .null-align-items-flex-end | Add align item flex end to your flex element. |
| .null-align-items-flex-start | Add align item flex start to your flex element. |
| .null-align-items-self-end | Add align item self end to your flex element. |
| .null-align-items-self-start | Add align item self start to your flex element. |
| .null-align-items-normal | Add align item normal to your flex element. |
| .null-align-items-stretch | Add align item stretch to your flex element. |
| .null-align-items-initial | Add align item initial to your flex element. |
|
.null-align-items-revert
|
Add align item revert to your flex element. |
|
.null-justify-content-center
|
Add justify content center to your flex element. |
|
.null-justify-content-end
|
Add justify content end to your flex element. |
|
.null-justify-content-flex-end
|
Add justify content flex end to your flex element. |
|
.null-justify-content-flex-start
|
Add justify content flex start to your flex element. |
|
.null-justify-content-inherit
|
Add justify content inherit to your flex element. |
|
.null-justify-content-initial
|
Add justify content initial to your flex element. |
|
.null-justify-content-left
|
Add justify content left to your flex element. |
|
.null-justify-content-normal
|
Add justify content normal to your flex element. |
|
.null-justify-content-revert
|
Add justify content revert to your flex element. |
|
.null-justify-content-right
|
Add justify content right to your flex element. |
|
.null-justify-content-space-around
|
Add justify content space around to your flex element. |
|
.null-justify-content-space-between
|
Add justify content space between to your flex element. |
|
.null-justify-content-space-evenly
|
Add justify content space evenly to your flex element. |
|
.null-justify-content-start
|
Add justify content start to your flex element. |
| .null-justify-content-stretch | Add justify content stretch to your flex element. |
|
.null-justify-content-unset
|
Add justify content unset to your flex element. |
| .null-flex-wrap-wrap | Add wrap to your flex element. |
|
.null-flex-wrap-reverse
|
Add wrap reverse to your flex element. |
|
.null-flex-direction-column
|
Add direction column to your flex element. |
|
.null-flex-direction-column-reverse
|
Add direction column reverse to your flex element. |
|
.null-flex-direction-row
|
Add direction row to your flex element. |
|
.null-flex-direction-row-reverse
|
Add direction row reverse to your flex element.
|
| .null-gap-10 | Add gap 10 to your flex element. |
| .null-gap-20 | Add gap 20 to your flex element. |
| .null-gap-30 | Add gap 30 to your flex element. |
| .null-gap-40 | Add gap 40 to your flex element. |
| .null-gap-50 | Add gap 50 to your flex element. |
Examples:
Null Flex
<div class="null-flex">Null Flex</div>Hello
From
Null
<div class="null-display-flex null-align-item-center null-justify-content-center null-gap-10">
<div>Hello</div>
<div>From</div>
<div>Null</div>
</div>