0

I'm trying to apply a flexbox layout to my elements based on this example. In the .html I have:

<link rel="import" href="seed-app-styles.html">
...
<template is="dom-if" if="{{isEqual(selected,'pacing')}}" restamp>
    <div class="px-login" id="pacing" class="flex flex--col flex--center flex--middle">
          <div>1</div>
          <div>2</div>
          <div>3</div>
    </div>        
</template>

And I do have flex enabled in the .scss file:

@import "px-flexbox-design/_base.flexbox.scss";

However, I'm still not getting a flexbox:

enter image description here

And the classes do get generated into the seed-app-styles.html:

.flex {
  display: -ms-flexbox;
  display: flex; }

.inline--flex {
  display: -ms-inline-flexbox;
  display: inline-flex; }

.flex--row {
  -ms-flex-direction: row;
      flex-direction: row; }

I would expect the div to be centered. What am I missing here?

There is no .css file - a .html is generated when I run gulp, that's the one being imported.

The template is used in the index.html:

<!DOCTYPE html>
<html>
<head>

...
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link
    id="main-element-import"
    rel="import"
    href="/elements/seed-app/seed-app.html"
    async>

</head>
<body class="loading">        
  <seed-app></seed-app>

  <script src="/elements/dev-guide/dev-guide-bootstrap.js"></script>

</body>
</html>
lte__
  • 7,175
  • 25
  • 74
  • 131
  • You should provide a [mcve]. You've shown some template code that (presumably) will be used to generate a DOM. What does that DOM look like? Is it what you expect it to look like? You've shown some SASS that will be used to generate some CSS. What does that CSS look like? Is it what you expect it to look like. Use the developer tools in your browser: Is there a particular rule that isn't being applied to an element that you think should? It would be helpful if you provided [a live demo](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/). – Quentin May 06 '18 at 11:42
  • You've made the div a flex container … but there are no flex children in it to apply the flex layout to. – Quentin May 06 '18 at 11:43
  • I've updated the question - I don't think I can provide a live demo because I'm using Polymer. I cannot check in the dev tools either, as they're hidden for some reason (I can only see the base .html in the dev tools, but not the style html, and no errors show up). – lte__ May 06 '18 at 11:47

1 Answers1

0

I think the children need to be marked as flex__item. Here's an example from the predix-webapp-starter.

https://github.com/PredixDev/predix-webapp-starter/blob/master/public/elements/kpi-bar/kpi-bar.html

enter image description here

gstroup
  • 1,064
  • 8
  • 16
  • This is not exactly true according to the documentation: https://www.predix-ui.com/#/css/layout/px-flexbox-design – lte__ May 08 '18 at 08:38