css - 柔性端不是移动元件

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 来分隔应用程序标题和帐户图标。我希望他们走到尽头，这是我目前的尝试，但失败了。有人可以帮助解释我在 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/