# antuikit / Flex

> Flex whose `gap` also takes the spacing ramp's names, so a gap follows the theme's size tokens and compact mode.

Docs: https://antuikit.com/docs/components/flex

## Install

npx antuikit@latest init
npx antuikit@latest add flex

## Import

import { Flex } from "@/components/ui/flex";

## Demos

- [Basic](https://ui.antuikit.com/embed/flex/basic.md): A `Flex` lays out its children in a row as they are, with no extra element around each one, and `gap` sets the space between them.
- [Gap](https://ui.antuikit.com/embed/flex/gap.md): Set `gap` to a spacing step from `xxs` to `xxl` to space the children with the theme's sizes, which shrink in compact mode.
- [Gap presets](https://ui.antuikit.com/embed/flex/gap-presets.md): Set `gap` to `small`, `medium` or `large` for the three preset sizes, which also follow the theme and compact mode.
- [Custom gap](https://ui.antuikit.com/embed/flex/custom-gap.md): Pass `gap` a number or any CSS gap value, like `"1rem 2rem"` for different row and column spacing when the items wrap.
- [Vertical](https://ui.antuikit.com/embed/flex/vertical.md): Set `orientation="vertical"` to stack the children in a column, top to bottom, instead of laying them out in a row.
- [Wrap](https://ui.antuikit.com/embed/flex/wrap.md): Set `wrap` to let items flow onto the next line when the row runs out of room, or pass a `flex-wrap` value like `wrap-reverse`.
- [Item flex](https://ui.antuikit.com/embed/flex/flex-prop.md): Set `flex` on a nested `Flex` to size it inside its parent: one share, two shares, or `none` to keep its own width.
- [Custom element](https://ui.antuikit.com/embed/flex/component.md): Set `component` to render a `ul`, a `section` or any other element, so the markup matches the content and the layout stays the same.
- [Nesting](https://ui.antuikit.com/embed/flex/nesting.md): Nest one `Flex` in another to build a header with its actions on the right, over a body with a fixed-width sidebar.
- [Empty placeholder](https://ui.antuikit.com/embed/flex/empty-collapse.md): A `Flex` with no children is hidden, so a fixed-height placeholder keeps one invisible child to hold its space.
- [Toolbar rows](https://ui.antuikit.com/embed/flex/toolbar-rows.md): Three toolbars built from one `Flex` each: search with actions on the right, a centered pager, and a filter row that wraps.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/flex`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Flex` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.