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

Posted 2023-03-06

【中文标题】@angular/flex-layout \'space-between\' 布局

【英文标题】：@angular/flex-layout 'space-between' layout@angular/flex-layout 'space-between' 布局

【发布时间】：2017-06-21 01:10:58

【问题描述】：

我的 html 模板中的 ng2-flex-layout 中有 2 个 div，其中包含图像。我希望其中 1 个 div 位于页面的最左侧，另一个位于页面的最右侧。

我的代码：

 <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"，但没有影响。

有人可以帮忙吗？

【问题讨论】：

你得到了什么结果，这段代码的容器是什么样子的？

我在左边得到一个图像，在中间得到一个图像......换句话说，每个 div 的左边都有一个图像。

【参考方案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>

结果：

【讨论】：

谢谢。我不确定我做错了什么。这是一种享受