x-flex

Micro-classes for CSS flex. Tested against two latest major versions of browsers.

Usage no npm install needed!

<script type="module">
  import xFlex from 'https://cdn.skypack.dev/x-flex';
</script>

README

Install

npm install x-flex

bower install x-flex

Browser Support

IE 10 IE 11 FF 25 FF 26 Ch 31 Ch 32 Sf 6 Sf 7
.flex-x ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
.flex-row ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
.flex-row-reverse ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
.flex-column ✓1 ✓ ✓ ✓ ✓ ✓ ✓ ✓
.flex-column-reverse ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
.flex-order-x ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
.flex-wrap ✓ ✓ ✗ ✗ ✓ ✓ ✗ ✓
.flex-wrap-reverse ✓ ✓ ✗ ✗ ✗ ✓ ✗ ✗
.align-items-start ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
.align-items-end ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
.align-items-center ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
.align-items-baseline ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓
.align-items-stretch ✓ ✓ ✓ ✓ ✓ ✓ ✓ ✓

Heads up

  1. Container requires explicit height or top/bottom property if it has flexed children.

Further reading