Display and alignment

Small utilities for when the markup alone does not give the layout you need.

Utilities sit in a late cascade layer, so they win over element and component styles.

Display

Class	Sets
`.hidden`	`display: none`
`.block`	`display: block`
`.inline-block`	`display: inline-block`
`.inline`	`display: inline`
`.flex`	`display: flex`
`.inline-flex`	`display: inline-flex`
`.contents`	`display: contents`
`.invisible`	`visibility: hidden`, keeps its space
`.visible`	`visibility: visible`

The hidden attribute uses !important, so it wins over every display class. Prefer it for content a script shows and hides.

Visible paragraph.

Invisible text keeps its space.

Centered text

Centered

flex items