@angular/flex-layout 'space-between' 布局

Question

我的 html 模板中的 ng2-flex-layout 中有 2 個帶有圖像的 div。 我希望這些 div 中的 1 個位於頁面的最左側，另一個位於頁面的最右側。

我的代碼：

 <div class="flex-container" 
     fxLayout="row" 
     fxLayout.md="column"
     fxLayout.sm="column"
     fxLayout.xs="column"
     fxLayoutAlign="space-between center">
  <div class="flex-item" fxLayoutAlign="left" fxFlex=50> <img></img></div>
  <div class="flex-item" fxFlex=50><img></img></div>
</div> 

我正在使用"@angular/flex-layout": "^2.0.0-beta.4",

我試過layout-align="space-between center"但沒有影響。

有人可以幫忙嗎？

Answer 1

第一： flex-layout 需要 Angular v2.4.3 或更高版本，請確保您滿足該依賴項。

第二：此代碼呈現您要求的結果。 fxLayout="row"和fxLayoutAlign="space-between center"在你的flex-container ，然后用flex-item標記你的孩子就是你所需要的。

<div class="flex-container" 
    fxLayout="row" 
    fxLayoutAlign="space-between center">
  <div class="flex-item"> 
    <img src="https://codepo8.github.io/canvas-images-and-pixels/img/horse.png" />
  </div>
  <div class="flex-item">
    <img src="https://codepo8.github.io/canvas-images-and-pixels/img/horse.png" />
  </div>
</div>

結果：