Align Elements Inside A Div Using CSS Flexbox – Align.css

Preview:

Description:

Align.css is a pure CSS library which can be used to align elements inside a container element using CSS Flexible Box Layout.

Supports both horizontal (row) and vertical (column) directions.

How to use it:

Install the align.css and import the stylesheet into the document.

# NPM
$ npm install align.css --save

<link rel="stylesheet" href="/path/to/align.min.css">

Justified to start.

• .line
• .line.justify-start
• .column
• .column.justify-start

Justified to end.

• .line.justify-end
• .column.justify-end

Horizontally centered.

• .line.h-centered
• .column.h-centered

Spaced between.

• .line.justify-between
• .column.justify-between

Spaced around.

• .line.justify-around
• .column.justify-around

Spaced evenly.

• .line.justify-evenly
• .column.justify-evenly

Totally centered.

• .line.centered
• .column.centered

Aligned to top.

• .line.align-start
• .column.align-start

Aligned to bottom.

• .line.align-end
• .column.align-end

Vertically centered.

• .line.v-centered
• .column.v-centered

Reversed.

• .line.reverse
• .column.reverse

Align items individually.

• .item-start
• .item-center
• .item-end

Changelog:

06/07/2018

• Remove auto wrap from flex column