angular4 Flex Layout开发实践
angular4 Flex Layout开发实践
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/77513213
angular flex
@angular/flex-layout angular辅助flex布局的插件。 插件地址：https://github.com/angular/flex-layout
演示样本
<div class="container"
fxLayout="row"
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0">
<div class="item item-1" fxFlex="33">Item 1</div>
<div class="item item-2" fxFlex="33">Item 2</div>
<div class="item item-3" fxFlex="33">Item 3</div>
</div>fxLayout
可选参数 row | column | row-reverse | column-reverse | wrap row 为横向布局，column为纵向布局。wrap为当三个item大于一行时，是选择继续在行内自适应，还是另起一行。
breakpoint | mediaQuery |
|---|---|
xs | ‘screen and (max-width: 599px)’ |
sm | ‘screen and (min-width: 600px) and (max-width: 959px)’ |
md | ‘screen and (min-width: 960px) and (max-width: 1279px)’ |
lg | ‘screen and (min-width: 1280px) and (max-width: 1919px)’ |
xl | ‘screen and (min-width: 1920px) and (max-width: 5000px)’ |
lt-sm | ‘screen and (max-width: 599px)’ |
lt-md | ‘screen and (max-width: 959px)’ |
lt-lg | ‘screen and (max-width: 1279px)’ |
lt-xl | ‘screen and (max-width: 1919px)’ |
gt-xs | ‘screen and (min-width: 600px)’ |
gt-sm | ‘screen and (min-width: 960px)’ |
gt-md | ‘screen and (min-width: 1280px)’ |
gt-lg | ‘screen and (min-width: 1920px)’ |
当屏幕小于599px时，样例为
fxLayoutAlign
布局参考线，当item大于一行时，并且fxLayout设置wrap可以看出来，例如
<div class="container"
fxLayout="row wrap"
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0">
<div class="item item-1" fxFlex="55">Item 1</div>
<div class="item item-2" fxFlex="20">Item 2</div>
<div class="item item-3" fxFlex="33">Item 3</div>
</div>
居中布局，也可以靠左靠右。
fxLayoutGap
布局间隙，每个色块之间的间距值。
fxFlex
弹性盒子的宽度值，默认单位为百分比。
fxFlexOrder
定义排序，值越小排序越靠前
<div class="container"
fxLayout="row "
fxLayout.xs="column"
fxLayoutAlign="start"
fxLayoutGap="10px"
fxLayoutGap.xs="0">
<div class="item item-1" fxFlex="33" fxFlexOrder="2">Item 1</div>
<div class="item item-2" fxFlex="33" fxFlexOrder="1">Item 2</div>
<div class="item item-3" fxFlex="33">Item 3</div>
</div>
fxFlexOffset
偏移，设置fxLayoutGap时，失效。
fxHide/fxShow
控制dom显示隐藏。
<div class="container"
fxLayout="row "
fxLayout.xs="column"
fxLayoutGap="0">
<div class="item item-1" fxFlex="33" fxHide="{{hide}}" fxFlexOffset="15">
<div>item1</div>
</div>
<div class="item item-2" (click)="onSave()" fxFlex="33">Item 2</div>
<div class="item item-3" fxFlex="33" >Item 3</div>
</div>