Flexbox
Flex Gap
Utilities for set inner spacing in between the flex child elements.
Variant
Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited
API
| class | css |
|---|---|
| flex-gap-0 | margin: calc(-1 * 0rem) 0 0 calc(-1 * 0rem); width: calc(100% + 0rem) |
| flex-gap-1 | margin: calc(-1 * 0.25rem) 0 0 calc(-1 * 0.25rem); width: calc(100% + 0.25rem) |
| flex-gap-2 | margin: calc(-1 * 0.5rem) 0 0 calc(-1 * 0.5rem); width: calc(100% + 0.5rem) |
| flex-gap-3 | margin: calc(-1 * 0.75rem) 0 0 calc(-1 * 0.75rem); width: calc(100% + 0.75rem) |
| flex-gap-4 | margin: calc(-1 * 1rem) 0 0 calc(-1 * 1rem); width: calc(100% + 1rem) |
| flex-gap-5 | margin: calc(-1 * 1.25rem) 0 0 calc(-1 * 1.25rem); width: calc(100% + 1.25rem) |
| flex-gap-6 | margin: calc(-1 * 1.5rem) 0 0 calc(-1 * 1.5rem); width: calc(100% + 1.5rem) |
| flex-gap-8 | margin: calc(-1 * 2rem) 0 0 calc(-1 * 2rem); width: calc(100% + 2rem) |
| flex-gap-10 | margin: calc(-1 * 2.5rem) 0 0 calc(-1 * 2.5rem); width: calc(100% + 2.5rem) |
| flex-gap-12 | margin: calc(-1 * 3rem) 0 0 calc(-1 * 3rem); width: calc(100% + 3rem) |
| flex-gap-16 | margin: calc(-1 * 4rem) 0 0 calc(-1 * 4rem); width: calc(100% + 4rem) |
| flex-gap-20 | margin: calc(-1 * 5rem) 0 0 calc(-1 * 5rem); width: calc(100% + 5rem) |
| flex-gap-24 | margin: calc(-1 * 6rem) 0 0 calc(-1 * 6rem); width: calc(100% + 6rem) |
| flex-gap-32 | margin: calc(-1 * 8rem) 0 0 calc(-1 * 8rem); width: calc(100% + 8rem) |
| flex-gap-40 | margin: calc(-1 * 10rem) 0 0 calc(-1 * 10rem); width: calc(100% + 10rem) |
| flex-gap-48 | margin: calc(-1 * 12rem) 0 0 calc(-1 * 12rem); width: calc(100% + 12rem) |
| flex-gap-56 | margin: calc(-1 * 14rem) 0 0 calc(-1 * 14rem); width: calc(100% + 14rem) |
| flex-gap-64 | margin: calc(-1 * 16rem) 0 0 calc(-1 * 16rem); width: calc(100% + 16rem) |
Usage
<div class="flex flex-wrap flex-gap-4">
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
HTML
.dummy-parent {
@extend
.flex,
.flex-wrap,
.flex-gap-4;
}
HTML