Angularjs <span flex></ span>は

Question

私が持っている私のMD-ツールバー

#logo { 
 
    padding-left: 7px; 
 
    object-fit: contain; 
 
} 
 

 
.language-selector{ 
 
    right: 0 !important; 
 
} 
 

 
.md-toolbar-tools { 
 
    display: flex; 
 
    background: #eeeeee; 
 
    max-width: 100%; 
 
    max-height: 1.3cm !important; 
 
}

<div id="toolbarContainer" layout="column" ng-cloak> 
 
    <md-content> 
 
    <md-toolbar md-scroll-shrink> 
 
     <div class="md-toolbar-tools"> 
 
     <img id="logo" src="https://angular.io/assets/images/logos/angular/angular.svg"> 
 
     <h2></h2> 
 
     <span flex></span> 
 

 
     <select class="language-selector" ng-change="translate()" ng-model="selectedLanguage"> 
 
      <option value="en">English</option> 
 
      <option value="no">Norsk</option> 
 
     </select> 
 
     </div> 
 
    </md-toolbar> 
 
    <div ng-view class="fade"></div> 
 
    </md-content> 
 
</div>

私は私の言語ドロップダウンメニューが md-toolbarの右側に表示されるようにしたいんだ

要素を揃えるが、私されていません私はそれを取得していない...任意の提案？

私はthisソリューションを試しましたが、まだ動作していません。

Answer 1

justify-content : space-betweenを使用して、Flexの子供たちの間にスペースを入れます。

#logo { 
 
    padding-left: 7px; 
 
    object-fit: contain; 
 
} 
 

 
.language-selector{ 
 
    right: 0 !important; 
 
} 
 

 
.md-toolbar-tools { 
 
    display: flex; 
 
    justify-content : space-between; 
 
    background: #eeeeee; 
 
    max-width: 100%; 
 
    max-height: 1.3cm !important; 
 
}

<div id="toolbarContainer" layout="column" ng-cloak> 
 
    <md-content> 
 
    <md-toolbar md-scroll-shrink> 
 
     <div class="md-toolbar-tools"> 
 
     <img id="logo" src="https://angular.io/assets/images/logos/angular/angular.svg"> 
 
     <h2></h2> 
 
     <span flex></span> 
 

 
     <select class="language-selector" ng-change="translate()" ng-model="selectedLanguage"> 
 
      <option value="en">English</option> 
 
      <option value="no">Norsk</option> 
 
     </select> 
 
     </div> 
 
    </md-toolbar> 
 
    <div ng-view class="fade"></div> 
 
    </md-content> 
 
</div>