Flexbox & Grid Utilities

Name: Flexbox & Grid — Nofinite NUICSS
Author: Nofinite

Utilities for building 1D and 2D responsive layouts using CSS Flexbox and CSS Grid.

Flex Direction & Wrapping

Class	Properties
`flex-row`	`flex-direction: row;`
`flex-row-reverse`	`flex-direction: row-reverse;`
`flex-col`	`flex-direction: column;`
`flex-col-reverse`	`flex-direction: column-reverse;`
`flex-wrap`	`flex-wrap: wrap;`
`flex-nowrap`	`flex-wrap: nowrap;`
`flex-wrap-reverse`	`flex-wrap: wrap-reverse;`

Class	Properties
`justify-start`	`justify-content: flex-start;`
`justify-center`	`justify-content: center;`
`justify-end`	`justify-content: flex-end;`
`justify-between`	`justify-content: space-between;`
`justify-around`	`justify-content: space-around;`
`items-start`	`align-items: flex-start;`
`items-center`	`align-items: center;`
`items-end`	`align-items: flex-end;`
`items-stretch`	`align-items: stretch;`

Class	Properties
`grid-cols-1`	`grid-template-columns: repeat(1, minmax(0, 1fr));`
`grid-cols-2`	`grid-template-columns: repeat(2, minmax(0, 1fr));`
`grid-cols-3`	`grid-template-columns: repeat(3, minmax(0, 1fr));`
`grid-cols-4`	`grid-template-columns: repeat(4, minmax(0, 1fr));`
`grid-cols-6`	`grid-template-columns: repeat(6, minmax(0, 1fr));`
`grid-cols-12`	`grid-template-columns: repeat(12, minmax(0, 1fr));`

Control gutters between grid and flex items: