web 3d图形渲染器
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

76 lines
1.6 KiB

  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. ## bug [4](https://github.com/philipwalton/flexbugs/blob/master/README.md#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored)
  4. ### Input
  5. ```css
  6. .foo { flex: 1; }
  7. .bar { flex: 1 1; }
  8. .foz { flex: 1 1 0; }
  9. .baz { flex: 1 1 0px; }
  10. ```
  11. ### Output
  12. ```css
  13. .foo { flex: 1 1; }
  14. .bar { flex: 1 1; }
  15. .foz { flex: 1 1; }
  16. .baz { flex: 1 1; }
  17. ```
  18. ## bug [6](https://github.com/philipwalton/flexbugs/blob/master/README.md#6-the-default-flex-value-has-changed)
  19. ### Input
  20. ```css
  21. .foo { flex: 1; }
  22. ```
  23. ### Output
  24. ```css
  25. .foo { flex: 1 1 0%; }
  26. ```
  27. > 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:
  28. ```css
  29. * {
  30. flex-shrink: 1;
  31. }
  32. ```
  33. ## bug [8.1.a](https://github.com/philipwalton/flexbugs/blob/master/README.md#8-flex-basis-doesnt-support-calc)
  34. ### Input
  35. ```css
  36. .foo { flex: 1 0 calc(1vw - 1px); }
  37. ```
  38. ### Output
  39. ```css
  40. .foo {
  41. flex-grow: 1;
  42. flex-shrink: 0;
  43. flex-basis: calc(1vw - 1px);
  44. }
  45. ```
  46. ## Usage
  47. ```js
  48. postcss([require('postcss-flexbugs-fixes')]);
  49. ```
  50. You can also disable bugs individually, possible keys `bug4`, `bug6` and `bug8a`.
  51. ```js
  52. var plugin = require('postcss-flexbugs-fixes');
  53. postcss([plugin({ bug6: false })]);
  54. ```
  55. See [PostCSS] docs for examples for your environment.
  56. [postcss]: https://github.com/postcss/postcss
  57. [ci-img]: https://travis-ci.org/luisrudge/postcss-flexbugs-fixes.svg
  58. [ci]: https://travis-ci.org/luisrudge/postcss-flexbugs-fixes