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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券