Components

Component

Flex

Box with flex display defaults and ergonomic aliases.

ReactReact Native6 props
PreviewReact

Grows between fixed items

Fills the remaining row width

wrapalign centergap x2fixed action

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"><Text>Label</Text><ActionButton>Save</ActionButton></Flex>

Notes

  • Prefer HStack/VStack for simple one-axis stacks.
  • Flex is exported from the package root; there is no layout subpath export.
  • Both platforms preserve Box token props.