我正在尝试根据此示例将 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>
我确实在 .scss 文件中启用了 flex：
@import "px-flexbox-design/_base.flexbox.scss";
但是，我仍然没有得到一个 flexbox：
这些类确实会生成到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>
