Components

Component

Flex

Box with flex display defaults and ergonomic aliases.

ReactReact Native6 props
PreviewReact

Flexible row

Align, justify, wrap, grow, and shrink are shared aliases.

Imports

import { Flex } from "@hozorica/hods-react";
import { Flex } from "@hozorica/hods-react-native";

Props

PropTypeDescription
directionrow | column | row-reverse | column-reverseFlex direction alias.
alignFlex alignmentMaps to alignItems.
justifyFlex distributionMaps to justifyContent.
wrapwrap | nowrap | trueFlex wrapping policy.
grow / flexGrowboolean | numberFlex growth.
shrink / flexShrinkboolean | numberFlex shrink.

Platform Support

React

Uses CSS flexbox.

React Native

Uses React Native flexbox.

Usage

<Flex direction="row" gap="x2" align="center" />

Notes

  • Prefer HStack/VStack for simple one-axis stacks.
  • Both platforms preserve Box token props.