我正在尝试根据 this 将 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>
最佳答案
我认为子项需要标记为flex__item。这是来自 predix-webapp-starter 的示例。
https://github.com/PredixDev/predix-webapp-starter/blob/master/public/elements/kpi-bar/kpi-bar.html
关于html - SASS/Flexbox 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50174853/