Flexbox components

Flexbox is a powerful one-dimensional layout system inspired by CSS Flexbox. It helps you create flexible layouts that can adapt to different sizes and arrangements in your AR/VR scenes.

Overview

The Flexbox component family consists of several components that work together:

flexbox - Main container component
flex-col - Grid column specification
flex-grow - Dynamic space distribution

Basic Usage

Flexbox uses a container/item pattern - you apply the flexbox component to a parent element, then place child elements inside it.

Advanced Features

Responsive Layout with flex-col

You can create responsive grid-based layouts using the flex-col component:

html

This will create a layout that adapts based on viewport size:

On small screens (sm): Each child takes up full width (12 columns)
On medium screens (md): First two children share a row (6 columns each), third child is on its own row
On large screens (lg): All three children fit on one row (4 columns each)

Flexible Item Sizing with flex-grow

Use flex-grow to make items fill available space:

html

The middle element will automatically expand to fill the remaining space.

Component Documentation

For detailed information about each component in the Flexbox family, see:

flexbox - Container properties and layout control
flex-col - Responsive grid column system
flex-grow - Dynamic space allocation