我的 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"
但没有效果。
有人可以帮忙吗?
最佳答案
首先:flex-layout 需要 Angular v2.4.3 或更高版本,确保满足该依赖性。
第二:此代码呈现您要求的结果。 fxLayout="row"
和 fxLayoutAlign="space-between center"
在你的 flex-container
上,然后用 flex 标记你的 child -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>
关于javascript - @angular/flex-layout 'space-between' 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42028049/