Flexbox
Flex Gap v1.1.0
Utilities for set inner spacing in between the flex child elements.
Class
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
<!-- Example -->
<y class="flex flex-wrap flex-gap-4">
<y> ... </y>
<y> ... </y>
...
</y>
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | Yes |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |