Clearfix fallback for `display: flow-root`
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit c51372c Jun 6, 2017

README.md

Fallback for display: flow-root

Use display: flow-root without a mess today, just add fallback by that simple plugin. Article about flow-root..

Transform that

.selector {
  display: flow-root;
}

to

.selector {
  display: flow-root;
  column-count: 1;
}

Installation

yarn add --dev postcss-flow-root

or

npm install --save-dev postcss-flow-root

Usage

Add postcss-flow-root to your plugins list, for example in webpack:

postcss: function () {
  return [
    require('postcss-flow-root')(options)
  ];
}

Be careful: use plugin before autoprefixer.

Options

You can choose fallback for emulate flow-root. There is a sandbox with all methods by @SelenIT.

{
  fallback: 'column-count' (default) | 'clearfix' | 'overflow'
}
  • column-count - create block formatting context for element, browser support (IE10+);
  • clearfix - add clearfix by pseudo-element;
  • overflow - use overflow: hidden fallback.