SASS / Flexbox無法正常工作

Question

我試圖根據此示例將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>

Answer 1

我認為孩子們需要標記為flex__item 。 這是predix-webapp-starter中的示例。

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

SASS / Flexbox無法正常工作

問題描述

1 個解決方案

解決方案1
0 2018-05-07 16:41:35

SASS / Flexbox無法正常工作

問題描述

1 個解決方案

解決方案1 0 2018-05-07 16:41:35

解決方案1
0 2018-05-07 16:41:35