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

Category: CSS & CSS3 , Layout | June 7, 2018
Author: ddazal
Views Total: 675
Official Page: Go to website
Last Update: June 7, 2018
License: MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply