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)

Note: Utility customizing is unavailable.

<!-- Example -->
<y class="flex flex-wrap flex-gap-4">
  <y> ... </y>
  <y> ... </y>
  ...
</y>