PostCSS Layouts

A shorthand for applying sensible layout methods.

Flex

layout: flex [options];

options

• shrink Makes container items shrink to width of its content
• column Changes direction of container items
• nowrap Prevents container items from wrapping
• open Sets width of container items to full width of container

Example:

.container {
    layout: flex column nowrap;
}

By default flex automatically makes container items grow to available space and wrap if equal to bigger than the container's width.

Inline Block

layout: inline-block;

Example:

.container {
    layout: inline-block;
}

Uses inline-block technique to layout container items.

Setup

npm install postcss-layouts --save-dev