Flex 端不是移动元件

Question

<dom-module id="catChat-app">
  <template>
    <style>
      .app-title{
        display: flex;
      },
      .account-icon{
        display: flex;
        justify-content: flex-end;
      }
    </style>

    <paper-drawer-panel>
      <paper-header-panel drawer>
        <paper-toolbar>
          <div>Application</div>
        </paper-toolbar>
      </paper-header-panel>
      <paper-header-panel main>
        <paper-toolbar>
          <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
          <div class="app-title" flex><span>Cat Chat</span></div>

          <div class="account-icon">
          <iron-icon icon="account-circle"></iron-icon>
          <span><!--number of people--></span>
          </div>

        </paper-toolbar>
        <div>MainContent</div>
      </paper-header-panel>
        </paper-drawer-panel>
  </template>

  <script>
    Polymer({

      is: 'catChat-app',

      properties: {
        prop1: {
          type: String,
          value: 'catChat-app',
        },
      },

    });
  </script>
</dom-module>

我正在尝试使用弹性框来分隔应用程序标题和帐户图标。我希望他们走到尽头，这是我目前的尝试，但失败了。谁能帮忙解释一下我在使用 flexbox 时做错了什么？

Answer 1

添加包装容器元素并应用以下 flex 样式，如下所示（缩略示例）：

<div class="container">
    <div class="app-title"><span>Cat Chat</span></div>
    <div class="account-icon"><span><!--number of people--></span></div>
</div>

注意：在这种情况下，您的子元素不需要 display:flex

.container {
  display: flex;
  justify-content: space-between;
}

Fiddle 示例：https://jsfiddle.net/9udb0ff3/

Flex 端不是移动元件

Flex end is not moving element

css

flexbox

polymer-1.0