{
  "title": "HStack",
  "description": "Horizontal stack with gap, align, and justify.",
  "url": "/docs/components/hstack",
  "since": "0.1.0",
  "tags": [
    "primitive",
    "layout"
  ],
  "platform": "both",
  "source": "---\ntitle: HStack\ndescription: Horizontal stack with gap, align, and justify.\nsince: 0.1.0\ntags: [primitive, layout]\nplatform: both\ncategory: primitives\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { ExpoSnack } from '@/components/expo-snack';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"HStack\" />\n\n## At a glance\n\n- Flex row with configurable `gap`, `align`, `justify`.\n- Maps to `flex-row` on web, flex direction row on native.\n\n## Preview\n\n<Preview name=\"hstack-basic\" />\n\n## Proportional widths\n\nBy default each child takes only the space its content needs. To split the row into proportional columns, give each child a `flex` value on `Box`. The numbers are ratios, not percentages — `flex={1}` + `flex={3}` + `flex={1}` produces a 20% / 60% / 20% split because `1 + 3 + 1 = 5`.\n\nFor 33 / 33 / 33, give every child `flex={1}`.\n\n<Preview name=\"hstack-flex\" />\n\n## Native preview\n\n<ExpoSnack component=\"HStack\" height={300} />\n\n## Props\n\n<PropsTable component=\"HStack\" />\n"
}