Align.css Examples

Flex direction: row

Justified to start .line or .line.justify-start

1
2
3
4
5

Justified to end .line.justify-end

1
2
3
4
5

Horizontally centered .line.h-centered

1
2
3
4
5

Spaced between .line.justify-between

1
2
3
4
5

Spaced around .line.justify-around

1
2
3
4
5

Spaced evenly .line.justify-evenly

1
2
3
4
5

Totally centered .line.centered

1
2
3
4
5

Aligned to top .line.align-start

1
2
3
4
5

Aligned to bottom .line.align-end

1
2
3
4
5

Vertically centered .line.v-centered

1
2
3
4
5

Reversed .line.reverse

1
2
3
4
5

Flex direction: column

Justified to start .column or .column.justify-start

1
2
3
4
5

Justified to end .column.justify-end

1
2
3
4
5

Vertically centered .column.v-centered

1
2
3
4
5

Spaced between .column.justify-between

1
2
3
4
5

Spaced around .column.justify-around

1
2
3
4
5

Spaced evenly .column.justify-evenly

1
2
3
4
5

Totally centered .column.centered

1
2
3
4
5

Aligned to left .line.align-start

1
2
3
4
5

Aligned to right .line.align-end

1
2
3
4
5

Horizontally centered .line.h-centered

1
2
3
4
5

Reversed .column.reverse

1
2
3
4
5

Align items individually

Start .item-start, center .item-center, end .item-end

1
2
3