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;
}

小提琴示例：https://jsfiddle.net/9udb0ff3/

Flex端不是移动元件

1 个答案: