Flex

npm install @vrembem/flex

@use "@vrembem/flex";

Options

Flex is built as a Sass module. Sass options are used to control CSS output, while design token CSS variables control the styling of the component. Below are the available configuration options.

Sass

Flex comes with the following Sass configuration options that can be set using either the config module or Sass with clause methods.

@use "@vrembem/flex" with (
  $config: (
    // Map for outputting flex--gap-[key] modifier variants
    // @type map
    "flex-gap": (
      "breakpoints": true,
      "default": tokens.get("spacing-md"),
      "0": 0,
      "xs": 1px,
      "sm": tokens.get("spacing-sm"),
      "md": tokens.get("spacing-md"),
      "lg": tokens.get("spacing-lg"),
      "xl": tokens.get("spacing-xl")
    ),

    // Map for outputting flex--wrap-[key] modifier variants
    // @type map
    "flex-wrap": (
      "breakpoints": true,
      "default": wrap,
      "": wrap,
      "no": nowrap,
      "reverse": wrap-reverse
    ),

    // Map for outputting flex--direction-[key] modifier variants
    // @type map
    "flex-direction": (
      "breakpoints": true,
      "default": row,
      "row": row,
      "row-reverse": row-reverse,
      "col": column,
      "col-reverse": column-reverse
    ),

    // Map for outputting flex--items-[key] modifier and flex-item-[key] utility 
    // variants.
    // @type map
    "flex-items": (
      "breakpoints": true,
      "initial": initial, // Equivalent: 0 1 auto
      "auto": auto, // Equivalent: 1 1 auto
      "none": none, // Equivalent: 0 0 auto
      "equal": 1 1 0,
      "fill": 1 0 auto,
      "full": 1 0 100%
    )
  )
);

Design tokens

Flex uses design token CSS variables in a reference and fallback pattern. Variables are referenced in the component's styles but are not directly defined; instead, they are provided with sensible fallbacks.

--vb-flex-wrap

wrap

--vb-flex-gap

1em

--vb-flex-gap-x

var(--vb-flex-gap)

--vb-flex-gap-y

var(--vb-flex-gap)

Basic usage

The most basic implementation of the flex component consists of a container element with the flex class. This can contain any number of children elements.

<div class="flex">
  ...
</div>

flex--inline

Also available is the flex--inline modifier. This sets the display property to inline-flex instead of flex.

<div class="flex flex--inline">
  ...
</div>

flex--gap-[key]

Modifiers used to set the gap property of a flex component. These modifiers are generated using key/value pairs of the flex-gap config options map. The default key sets the provided value on the flex component itself and is not output as a modifier.

<div class="flex flex--gap-sm">
  ...
</div>

Available variants

• flex--gap-0
• flex--gap-xs
• flex--gap-sm
• flex--gap-md
• flex--gap-lg
• flex--gap-xl

flex--gap-x-[key]

Modifiers to set the column-gap value on a flex component. These modifiers are generated using key/value pairs of the flex-gap config options map.

<div class="flex flex--gap-x-sm">
  ...
</div>

Available variants

• flex--gap-x-0
• flex--gap-x-xs
• flex--gap-x-sm
• flex--gap-x-md
• flex--gap-x-lg
• flex--gap-x-xl

flex--gap-y-[key]

Modifiers to set the row-gap value on a flex component. These modifiers are generated using key/value pairs of the flex-gap config options map.

<div class="flex flex--gap-y-xl">
  ...
</div>

Available variants

• flex--gap-y-0
• flex--gap-y-xs
• flex--gap-y-sm
• flex--gap-y-md
• flex--gap-y-lg
• flex--gap-y-xl

Breakpoint variants

These modifiers come with media breakpoint variants. This allows changing styles based on a specific breakpoint key in the breakpoints config options map.

Available variants

flex--wrap-[key]

Modifiers used to set the flex-wrap property of a flex component. By default, the flex component has wrapping enabled. These modifiers are generated using key/value pairs of the flex-wrap config options map. The default key sets the provided value on the flex component itself and is not output as a modifier.

<div class="flex flex--wrap-no">
  ...
</div>

Available variants

• flex--wrap-no
• flex--wrap-reverse

flex--direction-[key]

Modifiers used to set the flex-direction property of a flex component. By default the flex component has flex-direction set to row. These modifiers are generated using key/value pairs of the flex-direction config options map. The default key sets the provided value on the flex component itself and is not output as a modifier.

<div class="flex flex--direction-row-reverse">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Available variants

• flex--direction-row
• flex--direction-row-reverse
• flex--direction-col
• flex--direction-col-reverse

Breakpoint variants

These modifiers come with media breakpoint variants. This allows changing styles based on a specific breakpoint key in the breakpoints config options map.

<div class="flex flex--direction-col lg:flex--direction-row">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Available variants

• xs:flex--direction-[key]
• sm:flex--direction-[key]
• md:flex--direction-[key]
• lg:flex--direction-[key]
• xl:flex--direction-[key]

flex--items-[key]

Modifiers used to set the flex property on flex items (direct children of flex containers). These modifiers are generated using key/value pairs of the flex-items config options map.

<div class="flex flex--items-auto">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Available variants

• flex--items-initial: Sets flex items to flex: initial;.
• flex--items-auto: Sets flex items to flex: auto;.
• flex--items-none: Sets flex items to flex: equal;.
• flex--items-equal: Sets flex items to flex: 1 1 0;.
• flex--items-fill: Sets flex items to flex: 1 0 auto;.
• flex--items-full: Sets flex items to flex: 1 0 100%;.

Breakpoint variants

These modifiers come with media breakpoint variants. This allows changing styles based on a specific breakpoint key in the breakpoints config options map.

<div class="flex">
  <div class="flex--items-full lg:flex--items-auto">...</div>
  <div>...</div>
  <div>...</div>
</div>

Available variants

• xs:flex--items-[key]
• sm:flex--items-[key]
• md:flex--items-[key]
• lg:flex--items-[key]
• xl:flex--items-[key]

Utilities

Flex utilities are intended to be used directly on the children of a flex component or flex container (elements with display: flex or display: inline-flex). Since these only change a single CSS property, utility classes are used instead of BEM element classes.

flex-item-[key]

Utilities for controlling the flex shorthand property. These utilities are generated using key/value pairs of the flex-items config options map.

<div class="flex flex--items-auto">
  <div class="flex-item-none">...</div>
  <div>...</div>
  <div>...</div>
</div>

Available variants

• flex-item-initial: Sets flex to initial.
• flex-item-auto: Sets flex to auto.
• flex-item-none: Sets flex to none.
• flex-item-equal: Sets flex to 1 1 0.
• flex-item-fill: Sets flex to 1 0 auto.
• flex-item-full: Sets flex to 1 0 100%.

Breakpoint variants

This utility also come with media breakpoint variants. This allows changing styles based on a specific breakpoint key in the breakpoints config options map.

<div class="flex">
  <div class="flex-item-full lg:flex-item-auto">...</div>
  <div>...</div>
  <div>...</div>
</div>

Available variants

• xs:flex-item-[key]
• sm:flex-item-[key]
• md:flex-item-[key]
• lg:flex-item-[key]
• xl:flex-item-[key]