Flex is installed into your project as a file you own. It renders one element with display: flex and the flex properties as props. The children you pass are the flex items, with nothing wrapped around them.
It takes the same props as Ant Design v6's Flex, plus a ref. The one addition is eight values on gap: the spacing steps by name. That row is marked antuikit in the API table.
Install
npx antuikit@latest init
npx antuikit@latest add flex
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/flex, never from antd. The file lives in your project, so the import is a path, not a package.
import { Flex } from "@/components/ui/flex"
The axes
The props that take a value from a set, and what each set is. The Design tab's Figma properties follow the same axes.
orientation takes horizontal or vertical, and supersedes the older vertical boolean the way it does on Segmented, Space and Divider. Both still work, and orientation wins when both are set.
justify and align are not enums: they take any CSS value for justify-content and align-items, like space-between, space-evenly or baseline.
gap takes three presets (small, medium, large), the eight spacing steps (xxs to xxl, with base in the middle), or any CSS gap value. The named sizes follow the theme and shrink in compact mode. A raw 40 does not.
wrap takes any flex-wrap value, so "wrap-reverse" works as well as the boolean below.
flex and component are open rather than enumerated: any CSS flex shorthand, and any tag name or component. flex sets how this element behaves as an item of its parent, so one nested Flex can lay out a row and take a share of the row above it.
One boolean, and one prop that also accepts a boolean.
vertical stacks the children in a column. It is the older spelling of orientation="vertical", and ConfigProvider's flex setting can set it for a whole subtree. With align unset, a vertical Flex stretches its children to full width.
wrap={true} is the same as wrap="wrap". A Flex does not wrap unless you ask.
Slots
There is one, and it is children. No other prop on FlexProps takes a node, so there is no header slot, no item renderer and no place to pass content by key.
The slot inserts nothing. Your children go straight into the rendered element, so they are the flex items themselves. Space wraps each child in an item of its own, which is why flex="1" on a child works in a Flex and does nothing in a Space.
A Flex with no children is hidden, so a fixed-height Flex used to reserve space reserves none, and its padding and background go with it. Keep one child in it, hidden with invisible until the content arrives.
Events
Flex has no event props of its own. FlexProps extends React.HTMLAttributes<HTMLElement>, so every DOM handler, id, role and data attribute you pass lands on the element component names, along with the ref.
Styling
Flex renders one element, so it has no classNames or styles object. className and style land on that element.
API Reference
Flex
Flex's props. Rows marked antuikit in the Version column are added by the kit.