@kit-ng-ui/flex

Flexbox primitive for Kit UI. Mirrors ant-design's <Flex> API on Angular standalone + signals.

Install

pnpm add @kit-ng-ui/flex @kit-ng-ui/core

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/flex/styles' as flex;

Use

import { KitFlexComponent } from '@kit-ng-ui/flex';

@Component({
  standalone: true,
  imports: [KitFlexComponent],
  template: `
    <kit-flex justify="space-between" align="center">
      <h2>Inbox</h2>
      <kit-button type="primary">Compose</kit-button>
    </kit-flex>

    <kit-flex vertical gap="middle" align="stretch">
      <kit-card>Row one</kit-card>
      <kit-card>Row two</kit-card>
    </kit-flex>

    <kit-flex wrap [gap]="16">
      <kit-tag>red</kit-tag>
      <kit-tag>green</kit-tag>
      <kit-tag>blue</kit-tag>
    </kit-flex>
  `,
})
export class Demo {}

API

| Input | Type | Default | Description | | ---------- | --------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------- | | vertical | boolean | false | Switches the flex direction to column. | | justify | 'start' \| 'end' \| 'center' \| 'space-between' \| 'space-around' \| 'space-evenly' \| ... | null | Maps to justify-content. start/end are aliases for flex-start/flex-end. | | align | 'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch' | null | Maps to align-items. Same start/end aliasing as justify. | | wrap | boolean \| 'wrap' \| 'nowrap' \| 'wrap-reverse' | false | true ⇒ 'wrap'; false ⇒ unset. | | gap | 'small' \| 'middle' \| 'large' \| number \| null | null | Sets gap (presets map to 8 / 16 / 24 px). | | flex | string \| null | null | Sets the flex shorthand on the host container. |

Behavior notes

• <kit-flex> is a <div> — block-level by default. For inline placement wrap it manually or apply style="display: inline-flex".
• For evenly distributed children where you only care about the gap, prefer <kit-space>. Use <kit-flex> when you need justify-content, align-items, or a custom flex value.
• The component prop (tag override) from ant-design is not implemented yet — // TODO(parity).