Flex container

Horizontal layout primitive: display: flex; flex-wrap: wrap; gap. Children are .col; the parent is .flex. Columns auto-distribute by default; .col.is-narrow opts out and sizes to its content.

Fractional widths live on .grid. Native flex gap does not compose with percentage widths (width: 50% + gap = overflow), so this component does not ship .is-half, .is-eight, or .is-offset-* modifiers. For row layouts that need fractional widths, use .grid: it has .is-cols-N, .is-span-N, and named spans (.is-half, .is-one-third, …) backed by CSS Grid track sizing, which handles gap correctly by construction.

Live

Equal columns (auto-distributed)

Live

auto

HTML

<div class="flex">
<div class="col" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">auto</div>
<div class="col" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">auto</div>
<div class="col" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">auto</div>
<div class="col" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">auto</div>
</div>

Minimal sass

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

Playground

.is-narrow: one column sizes to content, rest share remainder

Live

badge

grows

HTML

<div class="flex">
<div class="col is-narrow" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">badge</div>
<div class="col" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">grows</div>
<div class="col" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">grows</div>
</div>

Minimal sass

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

Playground

.is-centered: justify-content center

Live

centred

HTML

<div class="flex is-centered">
<div class="col is-narrow" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">centred</div>
</div>

Minimal sass

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

Playground

.is-vertical: stack instead of row

Live

first

second

third

HTML

<div class="flex is-vertical">
<div class="col" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">first</div>
<div class="col" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">second</div>
<div class="col" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">third</div>
</div>

Minimal sass

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

Playground

Markup

<!-- Auto-distributed columns -->
<div class="flex">
  <div class="col">auto</div>
  <div class="col">auto</div>
  <div class="col">auto</div>
</div>

<!-- One column sizes to its content; the rest share the remainder -->
<div class="flex">
  <div class="col is-narrow">badge</div>
  <div class="col">grows</div>
  <div class="col">grows</div>
</div>

<!-- Modifiers on the .flex container -->
<div class="flex is-centered">…</div>
<div class="flex is-vertical">…</div>
<div class="flex no-wrap">…</div>

Variables

Variable	Default	Notes
`$flex-selector`	`'.flex'`	Container.
`$column-selector`	`'.col'`	Children.
`$narrow-selector`	`'.is-narrow'`	Opts a column out of auto-distribute; sizes to content.
`$gap`	`$global-gap` (1rem)	Native CSS `gap` applied to the flex container. Visible spacing between columns and wrapped rows.

Override example

@use '@adnap/krysalicss/layout/flex' with (
  $flex-selector: '.row',
  $column-selector: '.column',
  $gap: 1.5rem,
);