Container FlexRow

The <container-flexrow> component is an opinionated flex container with a fixed horizontal direction. Use this when you know your layout will always be a row.

Properties

Property	Description	Values	Example
`as`	Semantic HTML element	enum	`as="main"`
`gap`	Gap between items	rem	`gap="2"`
`justify-content`	Main axis alignment	flex-start, center, space-between, etc.	`justify-content="space-around"`
`align-items`	Cross axis alignment	flex-start, center, stretch, etc.	`align-items="center"`
`flex`	Flex property	string	`flex="1"`
`w`	Width	rem or keyword	`w="20"`
`min-w`	Minimum width	rem or keyword	`min-w="10"`
`max-w`	Maximum width	rem or keyword	`max-w="60"`

Note: No direction property - it's always row.

Width keywords: min-content, max-content

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

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

Basic Example

<container-flexrow 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-flexrow>

With Justify Content

<container-flexrow gap="2" justify-content="space-between">
  <container-box p="2" bg="lightblue">Left</container-box>
  <container-box p="2" bg="lightcoral">Center</container-box>
  <container-box p="2" bg="lightgreen">Right</container-box>
</container-flexrow>

Equal Width Children

<container-flexrow gap="1">
  <container-box p="2" bg="lightblue" flex="1">Flex 1</container-box>
  <container-box p="2" bg="lightcoral" flex="1">Flex 1</container-box>
  <container-box p="2" bg="lightgreen" flex="1">Flex 1</container-box>
</container-flexrow>

Responsive Gap

<container-flexrow gap="1" md-gap="2" lg-gap="4">
  <container-box p="2" bg="lightblue" flex="1">Item 1</container-box>
  <container-box p="2" bg="lightcoral" flex="1">Item 2</container-box>
  <container-box p="2" bg="lightgreen" flex="1">Item 3</container-box>
</container-flexrow>

Why Use FlexRow?

Cleaner code - No need to specify direction="row" every time
Clearer intent - Immediately obvious that this is a horizontal layout
Less verbose - One less property to type
Opinionated - Forces consistency across your application

Container CSS

Brutalist. Opinionated. Functional.