Блог

 <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?

Добавьте элемент контейнера для упаковки и примените приведенные ниже гибкие стили, как показано ниже (сокращенный пример):

 <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 /