Container Flex

The <container-flex> component is a flexible layout container that allows you to control flex direction dynamically. Use this when you need to change direction at different breakpoints.

Properties

Property	Description	Values	Example
as	Semantic HTML element	enum	as="main"
direction	Flex direction	row, column	direction="row"
gap	Gap between items	rem	gap="2"
justify-content	Main axis alignment	flex-start, center, space-between, etc.	justify-content="center"
align-items	Cross axis alignment	flex-start, center, stretch, etc.	align-items="center"
flex	Flex property	string	flex="1"

Allowed as values: main, div, footer, header, aside, section, article

All properties (except as) support responsive variants: sm-*, md-*, lg-*, xl-*, 2xl-*

Row Layout

<container-flex direction="row" gap="2">
  <container-box p="2" bg="lightblue">Item 1</container-box>
  <container-box p="2" bg="lightcoral">Item 2</container-box>
  <container-box p="2" bg="lightgreen">Item 3</container-box>
</container-flex>

Column Layout

<container-flex direction="column" gap="1">
  <container-box p="2" bg="lavender">Item A</container-box>
  <container-box p="2" bg="lightyellow">Item B</container-box>
  <container-box p="2" bg="lightpink">Item C</container-box>
</container-flex>

Responsive Direction

<container-flex 
  direction="column" 
  gap="1"
  md-direction="row"
  md-gap="2">
  <container-box p="2" bg="lightblue" flex="1">Column on mobile</container-box>
  <container-box p="2" bg="lightcoral" flex="1">Row on tablet+</container-box>
  <container-box p="2" bg="lightgreen" flex="1">Gap changes too</container-box>
</container-flex>

Alignment

<container-flex 
  direction="row" 
  gap="2"
  justify-content="space-between"
  align-items="center">
  <container-box p="2" bg="lightblue">Left</container-box>
  <container-box p="4" bg="lightcoral">Center (taller)</container-box>
  <container-box p="2" bg="lightgreen">Right</container-box>
</container-flex>