フレックスエンドは移動要素ではありません

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> 

フレックスボックスを使用してアプリケーションタイトルとアカウントアイコンを分離しようとしています。私は彼らにそれぞれの端に行きたい、これは私の現在の試みであり、失敗している。誰かが私がフレックスボックスで間違っていることを説明するのに役立つでしょうか？

Answer 1

包装容器の要素を追加し、次の（簡略例）のように、以下のフレックススタイルを適用します。

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