Back Go to Fluid CSS

EVA CSS Flex

Complete flexbox system with all .flex combinations for column and row directions.

Classic Flex Y Classic Flex X

Classic Flex Y

Complete flexbox system with all .flex.y combinations

Documentation

Comprehensive examples of .flex.y (column direction) with unique hyphenated selectors

Direction: .flex.y = flex-direction: column

Main axis (Y): start, center, end, space, around, evenly → justify-content

Cross axis (X): start, center, end, stretch, baseline → align-items

Pattern: .flex.y.[main-axis]-[cross-axis] (unique selectors)

Example: .flex.y.start-center → justify-content: flex-start + align-items: center

.flex.y.start-* (justify-content: flex-start)

Content aligned to the top (main axis start)

.flex.y.start-center

align-items: center

.flex.y.start-end

align-items: flex-end

.flex.y.start-stretch

align-items: stretch

.flex.y.start

justify-content: flex-start (simple)

Simple .flex.y examples (main axis only)

Basic flex direction column with common justify-content values

.flex.y

flex-direction: column (default)

.flex.y.center

justify-content: center

.flex.y.end

justify-content: flex-end

.flex.y.space

justify-content: space-between

.flex.y.around

justify-content: space-around

.flex.y.evenly

justify-content: space-evenly

.flex.y.center-* (justify-content: center)

Content centered vertically (main axis center)

.flex.y.center-start

align-items: flex-start

.flex.y.center-center

align-items: center

.flex.y.center-end

align-items: flex-end

.flex.y.center-stretch

align-items: stretch

.flex.y.end-* (justify-content: flex-end)

Content aligned to the bottom (main axis end)

.flex.y.end-start

align-items: flex-start

.flex.y.end-center

align-items: center

.flex.y.end-end

align-items: flex-end

.flex.y.end-stretch

align-items: stretch

.flex.y.space-* (justify-content: space-between)

Content spaced between top and bottom (requires 2+ items)

.flex.y.space-start

align-items: flex-start

.flex.y.space-center

align-items: center

.flex.y.space-end

align-items: flex-end

.flex.y.space-stretch

align-items: stretch

.flex.y.around-* (justify-content: space-around)

Content with equal space around each item

.flex.y.around-start

align-items: flex-start

.flex.y.around-center

align-items: center

.flex.y.around-end

align-items: flex-end

.flex.y.around-stretch

align-items: stretch

.flex.y.evenly-* (justify-content: space-evenly)

Content with equal space everywhere (including edges)

.flex.y.evenly-start

align-items: flex-start

.flex.y.evenly-center

align-items: center

.flex.y.evenly-end

align-items: flex-end

.flex.y.evenly-stretch

align-items: stretch

Classic Flex X

Complete flexbox system with all .flex.x combinations (row direction)

Documentation

Comprehensive examples of .flex.x (row direction) with unique hyphenated selectors

Direction: .flex.x = flex-direction: row

Main axis (X): start, center, end, space, around, evenly → justify-content

Cross axis (Y): start, center, end, stretch, baseline → align-items

Pattern: .flex.x.[main-axis]-[cross-axis] (unique selectors)

Example: .flex.x.start-center → justify-content: flex-start + align-items: center

.flex.x.start-* (justify-content: flex-start)

Content aligned to the left (main axis start)

.flex.x.start-center

align-items: center

.flex.x.start-end

align-items: flex-end

.flex.x.start-stretch

align-items: stretch

.flex.x.start

justify-content: flex-start (simple)

Simple .flex.x examples (main axis only)

Basic flex direction row with common justify-content values

.flex.x

flex-direction: row (default)

.flex.x.center

justify-content: center

.flex.x.end

justify-content: flex-end

.flex.x.space

justify-content: space-between

.flex.x.around

justify-content: space-around

.flex.x.evenly

justify-content: space-evenly

.flex.center (center both main and cross axis)

Shorthand for centering content both horizontally and vertically

.flex.center

justify-content: center + align-items: center

.flex.x.center-* (justify-content: center)

Content centered horizontally (main axis center)

.flex.x.center-start

align-items: flex-start

.flex.x.center-center

align-items: center

.flex.x.center-end

align-items: flex-end

.flex.x.center-stretch

align-items: stretch

.flex.x.end-* (justify-content: flex-end)

Content aligned to the right (main axis end)

.flex.x.end-start

align-items: flex-start

.flex.x.end-center

align-items: center

.flex.x.end-end

align-items: flex-end

.flex.x.end-stretch

align-items: stretch

.flex.x.space-* (justify-content: space-between)

Content spaced between left and right (requires 2+ items)

.flex.x.space-start

align-items: flex-start

.flex.x.space-center

align-items: center

.flex.x.space-end

align-items: flex-end

.flex.x.space-stretch

align-items: stretch

.flex.x.around-* (justify-content: space-around)

Content with equal space around each item

.flex.x.around-start

align-items: flex-start

.flex.x.around-center

align-items: center

.flex.x.around-end

align-items: flex-end

.flex.x.around-stretch

align-items: stretch

.flex.x.evenly-* (justify-content: space-evenly)

Content with equal space everywhere (including edges)

.flex.x.evenly-start

align-items: flex-start

.flex.x.evenly-center

align-items: center

.flex.x.evenly-end

align-items: flex-end

.flex.x.evenly-stretch

align-items: stretch

Multi-line Flex with align-content

Examples using flex-wrap: wrap and align-content for multiple lines

.flex.x.wrap.content-start

align-content: flex-start

.flex.x.wrap.content-center

align-content: center

.flex.x.wrap.content-end

align-content: flex-end

.flex.x.wrap.content-space

align-content: space-between

.flex.x.wrap.content-around

align-content: space-around

.flex.x.wrap.content-evenly

align-content: space-evenly

align-content vs align-items

align-items: Aligns flex items along the cross axis (single line)

align-content: Aligns flex lines when there are multiple lines (requires flex-wrap)

Usage: Use .flex.x.wrap + .content-* for multi-line layouts

Bento Grid Layout Example

Complex layout mixing different .flex.x alignments and sizes

Soft Flow Bento

Gentle composition with centered elements

Minimal Grid Bento

Simple geometric harmony