ZFlex

Flexbox container

Example

A

B

C

Import

import { ZFlex } from "zurto-ui";

Usage

import { ZFlex } from "zurto-ui";

function Example() {
  return (
    <ZFlex gap={12} justify="center">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </ZFlex>
  );
}

Props

| Prop | Type | Default | Description | | ----------- | --------- | -------------- | ----------------- | -------------- | | direction | 'row' | 'column' | 'row' | Flex direction | | gap | number | 0 | Gap between items | | align | string | 'stretch' | Align items | | justify | string | 'flex-start' | Justify content | | wrap | boolean | false | Allow wrapping |

Accessibility

• ✅ Keyboard navigation support
• ✅ ARIA attributes included
• ✅ Screen reader friendly
• ✅ Focus management