Container FlexCol

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

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="center"
align-items	Cross axis alignment	flex-start, center, stretch, etc.	align-items="flex-start"
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 column.

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-flexcol 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-flexcol>

With Align Items

<container-flexcol gap="1" align-items="center">
  <container-box p="2" bg="lightblue">Centered</container-box>
  <container-box p="2" bg="lightcoral">All items</container-box>
  <container-box p="2" bg="lightgreen">Horizontally</container-box>
</container-flexcol>

Full Height Layout

<container-flexcol gap="2" style="min-height: 100vh;">
  <container-box p="2" bg="lightgray">Header</container-box>
  <container-box p="3" bg="white" flex="1">Main Content (grows)</container-box>
  <container-box p="2" bg="lightgray">Footer</container-box>
</container-flexcol>

Nested Layout

<container-flexcol gap="2">
  <container-box p="2" bg="lightgray">Header</container-box>
  
  <container-flexrow gap="2">
    <container-box p="2" bg="lightblue" flex="1">Sidebar</container-box>
    <container-flexcol gap="1" flex="3">
      <container-box p="2" bg="white">Content 1</container-box>
      <container-box p="2" bg="white">Content 2</container-box>
    </container-flexcol>
  </container-flexrow>
  
  <container-box p="2" bg="lightgray">Footer</container-box>
</container-flexcol>

Why Use FlexCol?

• Cleaner code - No need to specify direction="column" every time
• Clearer intent - Immediately obvious that this is a vertical layout
• Less verbose - One less property to type
• Opinionated - Forces consistency across your application
• Common pattern - Most layouts start with a vertical column structure