angular4 Flex Layout开发实践

最新推荐文章于 2022-05-12 20:25:09 发布

j_bleach

最新推荐文章于 2022-05-12 20:25:09 发布

阅读量8.3k

点赞数 1

分类专栏： angular4 文章标签： angular flex

本文链接：https://blog.youkuaiyun.com/j_bleach/article/details/77513213

版权

angular4 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用 @angular/flex-layout 插件进行Angular应用的Flex布局开发，包括fxLayout、fxLayoutAlign、fxLayoutGap、fxFlex、fxFlexOrder、fxFlexOffset和fxHide/fxShow等属性的使用方法，提供了丰富的布局示例，帮助开发者实现灵活的响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>