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:
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>
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