2

I am using Flex-ratio property, but this property is not working. I am sharing my code. According to this link, this property is working fine on Polymer 1.0.

<!DOCTYPE html>
<html lang="en">
<head>
 <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
 <link rel="import" href="bower_components/paper-button/paper-button.html">
 <link rel="import" href="bower_components/paper-input/paper-input.html">
 <link rel="import" href="bower_components/paper-car/paper-card.html">
 <link rel="import" href="bower_components/polymer/polymer.html">
 <link rel="import" href="bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">

 <style is="custom-style" include="iron-flex"></style>
</head>
<body>

  <div class="horizontal layout">
    <div class="flex-2"><p>flex three</p></div>
    <div class="flex-1"><p>flex</p></div>
    <div class="flex-2"><p>flex two</p></div>
   </div>

</body>
</html>
Akashsingla19
  • 690
  • 2
  • 8
  • 18
  • Based from this [blog](https://blog.polymer-project.org/announcements/2015/12/01/deprecating-deep/), Polymer is dropping `/deep/` support in their elements and are encouraging people to use the `mixins` instead of the `classes`. *"Currently, the layout class stylesheet uses the [`/deep/` combinator](https://elements.polymer-project.org/guides/flex-layout) and therefore, works across all local DOM boundaries. Because `/deep/` is slated to be removed from the shadow DOM spec, this stylesheet will eventually be replaced by a set of rules that do not use /deep/."* – abielita Dec 13 '16 at 16:26
  • even with `/deep/` removed from the https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html it is still broken – dman Feb 17 '17 at 23:38

1 Answers1

1

I made this mistake myself.... need to import iron-flex-factors in <style include="iron-flex iron-flex-factors iron-flex-alignment">

dman
  • 10,406
  • 18
  • 102
  • 201