Я пытаюсь применить макет flexbox к своим элементам на основе этого примера. В .html у меня есть:
<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>
И у меня есть flex включен в файле .scss:
@import "px-flexbox-design/_base.flexbox.scss";
Однако я все еще не получаю флексбокс:
И классы генерируются в 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; }
Я бы ожидал, что div будет центрирован. Что мне здесь не хватает?
Файл .css отсутствует - при запуске gulp создается файл .html, который импортируется.
Шаблон используется в 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>