Press/to search

Flexbox

Flex Gap v1.1.0

Utilities for set inner spacing in between the flex child elements.

Class

classcss
flex-gap-0margin: calc(-1 * 0rem) 0 0 calc(-1 * 0rem);
width: calc(100% + 0rem)
flex-gap-1margin: calc(-1 * 0.25rem) 0 0 calc(-1 * 0.25rem);
width: calc(100% + 0.25rem)
flex-gap-2margin: calc(-1 * 0.5rem) 0 0 calc(-1 * 0.5rem);
width: calc(100% + 0.5rem)
flex-gap-3margin: calc(-1 * 0.75rem) 0 0 calc(-1 * 0.75rem);
width: calc(100% + 0.75rem)
flex-gap-4margin: calc(-1 * 1rem) 0 0 calc(-1 * 1rem);
width: calc(100% + 1rem)
flex-gap-5margin: calc(-1 * 1.25rem) 0 0 calc(-1 * 1.25rem);
width: calc(100% + 1.25rem)
flex-gap-6margin: calc(-1 * 1.5rem) 0 0 calc(-1 * 1.5rem);
width: calc(100% + 1.5rem)
flex-gap-8margin: calc(-1 * 2rem) 0 0 calc(-1 * 2rem);
width: calc(100% + 2rem)
flex-gap-10margin: calc(-1 * 2.5rem) 0 0 calc(-1 * 2.5rem);
width: calc(100% + 2.5rem)
flex-gap-12margin: calc(-1 * 3rem) 0 0 calc(-1 * 3rem);
width: calc(100% + 3rem)
flex-gap-16margin: calc(-1 * 4rem) 0 0 calc(-1 * 4rem);
width: calc(100% + 4rem)
flex-gap-20margin: calc(-1 * 5rem) 0 0 calc(-1 * 5rem);
width: calc(100% + 5rem)
flex-gap-24margin: calc(-1 * 6rem) 0 0 calc(-1 * 6rem);
width: calc(100% + 6rem)
flex-gap-32margin: calc(-1 * 8rem) 0 0 calc(-1 * 8rem);
width: calc(100% + 8rem)
flex-gap-40margin: calc(-1 * 10rem) 0 0 calc(-1 * 10rem);
width: calc(100% + 10rem)
flex-gap-48margin: calc(-1 * 12rem) 0 0 calc(-1 * 12rem);
width: calc(100% + 12rem)
flex-gap-56margin: calc(-1 * 14rem) 0 0 calc(-1 * 14rem);
width: calc(100% + 14rem)
flex-gap-64margin: 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

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.