|
Last change
on this file was 9af201e, checked in by MBK <marija.karapandzova@…>, 11 days ago |
|
Fix frontend appearance
|
-
Property mode
set to
100644
|
|
File size:
1.6 KB
|
| Line | |
|---|
| 1 | # PostCSS Flexbugs Fixes [![Build Status][ci-img]][ci]
|
|---|
| 2 | [PostCSS] plugin This project tries to fix all of [flexbug's](https://github.com/philipwalton/flexbugs) issues.
|
|---|
| 3 |
|
|---|
| 4 | ## bug [4](https://github.com/philipwalton/flexbugs/blob/master/README.md#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored)
|
|---|
| 5 | ### Input
|
|---|
| 6 |
|
|---|
| 7 | ```css
|
|---|
| 8 | .foo { flex: 1; }
|
|---|
| 9 | .bar { flex: 1 1; }
|
|---|
| 10 | .foz { flex: 1 1 0; }
|
|---|
| 11 | .baz { flex: 1 1 0px; }
|
|---|
| 12 | ```
|
|---|
| 13 |
|
|---|
| 14 | ### Output
|
|---|
| 15 |
|
|---|
| 16 | ```css
|
|---|
| 17 | .foo { flex: 1 1; }
|
|---|
| 18 | .bar { flex: 1 1; }
|
|---|
| 19 | .foz { flex: 1 1; }
|
|---|
| 20 | .baz { flex: 1 1; }
|
|---|
| 21 | ```
|
|---|
| 22 |
|
|---|
| 23 | ## bug [6](https://github.com/philipwalton/flexbugs/blob/master/README.md#6-the-default-flex-value-has-changed)
|
|---|
| 24 | ### Input
|
|---|
| 25 |
|
|---|
| 26 | ```css
|
|---|
| 27 | .foo { flex: 1; }
|
|---|
| 28 | ```
|
|---|
| 29 |
|
|---|
| 30 | ### Output
|
|---|
| 31 |
|
|---|
| 32 | ```css
|
|---|
| 33 | .foo { flex: 1 1 0%; }
|
|---|
| 34 | ```
|
|---|
| 35 |
|
|---|
| 36 | > This only fixes css classes that have the `flex` property set. To fix elements that are contained inside a flexbox container, use this global rule:
|
|---|
| 37 | ```css
|
|---|
| 38 | * {
|
|---|
| 39 | flex-shrink: 1;
|
|---|
| 40 | }
|
|---|
| 41 | ```
|
|---|
| 42 |
|
|---|
| 43 | ## bug [8.1.a](https://github.com/philipwalton/flexbugs/blob/master/README.md#8-flex-basis-doesnt-support-calc)
|
|---|
| 44 | ### Input
|
|---|
| 45 |
|
|---|
| 46 | ```css
|
|---|
| 47 | .foo { flex: 1 0 calc(1vw - 1px); }
|
|---|
| 48 | ```
|
|---|
| 49 |
|
|---|
| 50 | ### Output
|
|---|
| 51 |
|
|---|
| 52 | ```css
|
|---|
| 53 | .foo {
|
|---|
| 54 | flex-grow: 1;
|
|---|
| 55 | flex-shrink: 0;
|
|---|
| 56 | flex-basis: calc(1vw - 1px);
|
|---|
| 57 | }
|
|---|
| 58 | ```
|
|---|
| 59 |
|
|---|
| 60 | ## Usage
|
|---|
| 61 |
|
|---|
| 62 | ```js
|
|---|
| 63 | postcss([require('postcss-flexbugs-fixes')]);
|
|---|
| 64 | ```
|
|---|
| 65 |
|
|---|
| 66 | You can also disable bugs individually, possible keys `bug4`, `bug6` and `bug8a`.
|
|---|
| 67 | ```js
|
|---|
| 68 | var plugin = require('postcss-flexbugs-fixes');
|
|---|
| 69 | postcss([plugin({ bug6: false })]);
|
|---|
| 70 | ```
|
|---|
| 71 |
|
|---|
| 72 | See [PostCSS] docs for examples for your environment.
|
|---|
| 73 |
|
|---|
| 74 | [postcss]: https://github.com/postcss/postcss
|
|---|
| 75 | [ci-img]: https://travis-ci.org/luisrudge/postcss-flexbugs-fixes.svg
|
|---|
| 76 | [ci]: https://travis-ci.org/luisrudge/postcss-flexbugs-fixes
|
|---|
Note:
See
TracBrowser
for help on using the repository browser.