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>