Flexbox

Core Concepts

Flex utilities are now axis-explicit and composable:

TIP

• .h-flex enables flex layout (required)
• Direction: .h-row or .h-column
• Main axis alignment (justify content): .h-start, .h-end, .h-center, h-space-between etc.
• Cross axis alignment (align items): .h-align-start, .h-align-center, .h-align-stretch etc.
• Multi-line alignment (align content): .h-content-start, .h-content-center, etc.
• Wrapping: .h-wrap or .h-nowrap
• Item-level self alignment: .h-self-start, .h-self-end, etc.
• Optional item-level utilities, e.g. .h-self-center, .h-equal-sizing, etc.
• Gap utilities: .h-gap-xs, .h-gap-16, etc.

Legacy Support

WARNING

Since v0.2.0, the flexbox utilities have been revamped to use more explicit and composable class names that better reflect flexbox semantics. Legacy class names remain supported only where they map to correct flexbox semantics.

Migration Table

Legacy Class	Replacement
.h-flex-row	.h-row
.h-flex-column	.h-column
.h-vertical-center	.h-align-center
.h-top	.h-align-start
.h-bottom	.h-align-end
.h-justify-evenly	.h-space-evenly
.h-flex-nowrap	.h-nowrap
.h-self-vertical-center	.h-self-center
.h-flex-column.h-top	.h-content-start
.h-flex-column.h-bottom	.h-content-end
.h-flex-column.h-vertical-center	.h-content-center

Base & Direction

Required Base

.h-flex → display: flex

Direction

• .h-row → flex-direction: row
• .h-column → flex-direction: column
• .h-row-reverse → flex-direction: row-reverse
• .h-column-reverse → flex-direction: column-reverse

Main Axis Alignment (justify-content)

Class	CSS
.h-start	justify-content: flex-start
.h-end	justify-content: flex-end
.h-center	justify-content: center
.h-space-between	justify-content: space-between
.h-space-around	justify-content: space-around
.h-space-evenly	justify-content: space-evenly

Center (X-Axis)

.h-row.h-center

INFO

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Start / End

.h-row[.h-start, .h-end]

INFO

h-end

Space-Between

.h-row.h-space-between

INFO

space-between

space-between

Space-Around

.h-row.h-space-around

INFO

space-around

space-around

Cross Axis Alignment (align-items)

Class	CSS
.h-align-start	align-items: flex-start
.h-align-end	align-items: flex-end
.h-align-center	align-items: center
.h-align-baseline	align-items: baseline
.h-align-stretch	align-items: stretch

Align Start / End

.h-row.h-align-start

INFO

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

start

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

end

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Align Center

.h-row.h-align-center

INFO

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

center

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Align Baseline

.h-row.h-align-baseline

INFO

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

baseline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Stretch

.h-row.h-align-stretch

INFO

stretch

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Multi-line Alignment (align-content)

Used only when wrapping occurs.

Class	CSS
.h-content-start	align-content: flex-start
.h-content-end	align-content: flex-end
.h-content-center	align-content: center
.h-content-space-between	align-content: space-between
.h-content-space-around	align-content: space-around

Example

.h-flex.h-wrap.h-content-center

INFO

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Self Alignment (Flex Items)

Item-only utilities:

• .h-self-start
• .h-self-end
• .h-self-center
• .h-self-baseline
• .h-self-stretch

Self Center

.h-row.h-align-stretch + .h-self-center on one item

INFO

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

self-center

Flex Cell (Flex Items)

.h-flex.h-cell sets flex: 1 on all children. Items will grow and shrink equally to fill the available space.

INFO

Example text

Longer example text

1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Equal Sizing (Flex Items)

.h-equal-sizing → children receive flex: 1 1 0. Items will grow and shrink equally, ignoring their content size.

INFO

flex-grow: 1

flex-grow: 1

flex-grow: 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Wrapping

• .h-wrap → flex-wrap: wrap
• .h-nowrap → flex-wrap: nowrap

INFO

h-wrap

h-wrap

h-wrap

h-wrap

h-nowrap

h-nowrap

h-nowrap

h-nowrap

h-nowrap

Change Gap Sizes

Use T-Shirt sizes or numbers for the gaps just like for spacings, see general Spacing Documentation.

.h-flex[.h-gap-xxs/.h-gap-4, .h-gap-xs/.h-gap-8, .h-gap-s/.h-gap-16, etc.]

Examples:

.h-gap-xs / .h-gap-8

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

.h-gap-m / .h-gap-24

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

.h-gap-xl / .h-gap-48

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Extra Styling

Column Divider

.h-row.h-flex-divider

INFO

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.