Flex

Flexbox child utilities that compose with the .is-flex display class from Visibility. Every rule uses !important so utilities reliably beat component-level flex defaults.

How it works

All classes use the .is- prefix and target flexbox properties one at a time. They're designed to override the per-property defaults set by a flex container — pair them with .is-flex (or the layout primitive) on the parent.
gap uses bare integer keys (.gap-0 through .gap-6) on the same rem scale as the Spacing helpers, so the visual rhythm stays consistent.
Grow / shrink are restricted to the two values that cover ~95% of real-world use (0 and 1); reach for component-level CSS for anything finer.

Live

justify-content

Live

A B C

HTML

<div class="is-flex is-justify-content-space-between" style="background: var(--kc-default-bg); padding: 0.5rem;">
<span style="background: var(--kc-primary-bg); color: var(--kc-primary-fg); padding: 0.25rem 0.5rem;">A</span>
<span style="background: var(--kc-primary-bg); color: var(--kc-primary-fg); padding: 0.25rem 0.5rem;">B</span>
<span style="background: var(--kc-primary-bg); color: var(--kc-primary-fg); padding: 0.25rem 0.5rem;">C</span>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-flex', 'helper-visibility')
);

Playground

flex-direction and gap

Live

1 2 3

HTML

<div class="is-flex is-flex-direction-column gap-2" style="background: var(--kc-default-bg); padding: 0.5rem; max-width: 12rem;">
<span style="background: var(--kc-success-bg); color: var(--kc-success-fg); padding: 0.25rem 0.5rem;">1</span>
<span style="background: var(--kc-success-bg); color: var(--kc-success-fg); padding: 0.25rem 0.5rem;">2</span>
<span style="background: var(--kc-success-bg); color: var(--kc-success-fg); padding: 0.25rem 0.5rem;">3</span>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-flex', 'helper-visibility')
);

Playground

align-self

Live

centre top bottom

HTML

<div class="is-flex is-align-items-center gap-2" style="background: var(--kc-default-bg); padding: 0.5rem; height: 6rem;">
<span style="background: var(--kc-warning-bg); color: var(--kc-warning-fg); padding: 0.25rem 0.5rem;">centre</span>
<span class="is-align-self-flex-start" style="background: var(--kc-warning-bg); color: var(--kc-warning-fg); padding: 0.25rem 0.5rem;">top</span>
<span class="is-align-self-flex-end" style="background: var(--kc-warning-bg); color: var(--kc-warning-fg); padding: 0.25rem 0.5rem;">bottom</span>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'helper-flex', 'helper-visibility')
);

Playground

Markup

<div class="is-flex is-flex-direction-row is-justify-content-space-between is-align-items-center gap-3">
  <span>Left</span>
  <span>Centre</span>
  <span>Right</span>
</div>

<div class="is-flex is-flex-wrap-wrap gap-2">
  <span class="is-flex-grow-1">Stretches</span>
  <span class="is-flex-grow-0">Fixed</span>
</div>

<div class="is-flex">
  <span class="is-align-self-flex-end">Aligned to the end</span>
</div>

Class reference

Property	Classes
`flex-direction`	`.is-flex-direction-{row,row-reverse,column,column-reverse}`
`justify-content`	`.is-justify-content-{flex-start,flex-end,center,space-between,space-around,space-evenly}`
`align-items`	`.is-align-items-{stretch,flex-start,flex-end,center,baseline}`
`align-self`	`.is-align-self-{auto,flex-start,flex-end,center,baseline,stretch}`
`align-content`	`.is-align-content-{flex-start,flex-end,center,space-between,space-around,stretch}`
`flex-wrap`	`.is-flex-wrap-{nowrap,wrap,wrap-reverse}`
`flex-grow`	`.is-flex-grow-0`, `.is-flex-grow-1`
`flex-shrink`	`.is-flex-shrink-0`, `.is-flex-shrink-1`
`gap`	`.gap-0` (0), `.gap-1` (0.25rem), `.gap-2` (0.5rem), `.gap-3` (0.75rem), `.gap-4` (1rem), `.gap-5` (1.5rem), `.gap-6` (3rem)

Variables

Variable	Default	Notes
`$selector-prefix`	`'.is-'` (from framework root)	Re-uses `variables.$selector-prefix-is`. Override to alias every flex utility (directions, justify-content, align-items, etc.) under a different prefix. Does NOT cover the gap scale — see `$gap-selector-prefix` below.
`$gap-selector-prefix`	`'.gap-'`	Prefix prepended to each `$gap-scale` key. Bootstrap parity by default; override to `"#variables.$selector-prefix-isgap-"` (i.e. `.is-gap-`) for strict alignment with the rest of the helpers.
`$directions`	`(row, row-reverse, column, column-reverse)`	One class per entry. Drop unused directions to shave bytes.
`$justify-values`	`(flex-start, flex-end, center, space-between, space-around, space-evenly)`	One class per entry.
`$align-values`	`(stretch, flex-start, flex-end, center, baseline)`	One class per entry for `align-items`.
`$align-self-values`	`(auto, flex-start, flex-end, center, baseline, stretch)`	One class per entry for `align-self`.
`$align-content-values`	`(flex-start, flex-end, center, space-between, space-around, stretch)`	One class per entry for `align-content`.
`$wrap-values`	`(nowrap, wrap, wrap-reverse)`	One class per entry.
`$gap-scale`	`(0, 1, 2, 3, 4, 5, 6)` mapping to `0` / `0.25rem` / `0.5rem` / `0.75rem` / `1rem` / `1.5rem` / `3rem`	Map keys are used verbatim in the class name, so override with care if you want named keys instead of integers.

Override example

@use '@adnap/krysalicss/helper/flex' with (
  // Alias under your own prefix:
  $selector-prefix: '.flex-',
  // Drop directions you don't ship (e.g. only emit row/column):
  $directions: (row, column),
  // Trim the gap scale to match your design tokens:
  $gap-scale: (
    0: 0,
    sm: 0.5rem,
    md: 1rem,
    lg: 2rem,
  ),
);

Tokens consumed

None — flex helpers emit literal CSS values from their source maps.