postcss-flex-ios

PostCSS plugin that includes `-webkit-` prefixes for all flexbox properties to ensure correct functionality in old iOS browsers

Usage no npm install needed!

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

Adds -webkit counterparts beneath all flex properties.

This is to address issues that multiple versions of iOS browsers have with the functionality of flexbox elements.

.foo {
  display: flex;
}

will be processed to:

.foo {
  display: flex;
  display: -webkit-flex;
}

Other flex properties are also addressed (full list below).

.foo {
  flex-direction: column;
}

will be processed to:

.foo {
  flex-direction: column;
  -webkit-flex-direction: column;
}

All the properties that will be processed are: