angular4 Flex Layout开发实践

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 1div>
  <div class="item item-2" fxFlex="33">Item 2div>
  <div class="item item-3" fxFlex="33">Item 3div>
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 1div>
  <div class="item item-2" fxFlex="20">Item 2div>
  <div class="item item-3" fxFlex="33">Item 3div>
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 1div>
  <div class="item item-2" fxFlex="33" fxFlexOrder="1">Item 2div>
  <div class="item item-3" fxFlex="33">Item 3div>
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>item1div>
  div>
  <div class="item item-2" (click)="onSave()" fxFlex="33">Item 2div>
  <div class="item item-3" fxFlex="33" >Item 3div>
div>