postcss-layouts

A shorthand to apply sensible default layout characteristics using a preferred method.

Usage no npm install needed!

<script type="module">
  import postcssLayouts from 'https://cdn.skypack.dev/postcss-layouts';
</script>

README

PostCSS Layouts

NPM Version Linux Build Status Windows Build Status Gitter Chat

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