使用 Angular Flex-Layout 輔助版面布局

来源:转载

强大的 Angular 团队在 Github 上有个专案叫做 angular/flex-layout ,将 FlexBox CSS 包装成一个个 Directive 来使用,这个 Flex Layout 专案辅助 Angular (v4.1 以上版本) 用更方便的方式来布局 HTML 样板。


因为 angular/material2 不包含 Flex 版面布局系统,如果想要在 Material2 进行排版时,建议安装 angular/flex-layout 此工具。


从 caniuse 可以看到目前各大浏览器都支援 FlexBox CSS 样式,但请注意 IE 10 以上版本仅部分支援。


Flex Layout

Angular Flex Layout 使用 FlexBox CSS + mediaQuery 达成版面布局的设计,FlexBox 的基本模型请参考下图:



FlexBox 主要角色为主容器(flex-container)和子元素(flex-item),主容器来包各项子元素并控制子元素的排列方式。


使用方式

从 文件 中,HTML API 可以分出以下三类:


容器类 Containers
子元素类 Child Elements within Containers
特殊响应功能 Special Responsive Features
容器类 Containers

建立一个 FlexBox 容器,其中可包含一个以上的巢状 Flex 子元素。


fxLayout
定义容器内子元素的排版方式
範例: <div fxLayout="row" fxLayout.xs="column"> </div>
设定值: row 、 column 、 row-reverse 、 column-reverse 、 wrap

fxLayoutWrap
定义容器内子元素的排版方式採用多行方式排列
範例: <div fxLayoutWrap> </div>

fxLayoutGap
定义容器内子元素的间隔
範例: <div fxLayoutGap="10px"> </div>
设定值:可接受这些单位 %、px、vw、vh

fxLayoutAlign
定义容器内子元素的对齐方式
範例: <div fxLayoutAlign="start stretch"> </div>
设定值:
main-aixs: start 、 center 、 end 、 space-around 、 pace-between
cross-axis: start 、 center 、 end 、 stretch


子元素类 Child Elements within Containers
fxFlex
定义子元素将如何相对于父容器和容器内的其他子元素调整其大小,增长或收缩
範例: <div fxFlex="1 2 calc(15em + 20px)"></div>
设定值:
可接受这些单位 %、px、vw、vh
设定值顺序: <grow> <shrink> <basis>


fxFlexOrder
定义排列顺序
範例: <div fxFlexOrder="2"></div>
设定值:int

fxFlexOffset
设定子元素的偏移
範例: <div fxFlexOffset="20px"></div>
设定值:可接受这些单位 %、px、vw、vh

fxFlexAlign
如同 fxLayoutAlign 一样,但只对该子元素有效
範例: <div fxFlexAlign="center"></div>
设定值: start 、 baseline 、 center 、 end

fxFlexFill
最大化子元素,将子元素的 width 和 height 撑到最大
範例: <div fxFlexFill></div>

fxFlex 由三个属性组合而成,依照先后顺序分别是 flex-grow 、 flex-shrink 和 flex-basis ,三个属性的解释如下:


flex-grow
当子元素的 flex-basis 长度 小于 它从父元素分配到的长度,按照数字做相对应的 伸展 比例分配
数字,无单位,预设值为 1,设为 0 的话不会进行弹性变化,不可为负值

flex-shrink
当子元素的 flex-basis 长度 大于 它从父元素分配到的长度,按照数字做相对应的压 缩 比例分配
数字,无单位预设值为 1,设为 0 的话不会进行弹性变化,不可为负值

flex-basis
子元素的基本大小,作为父元素的大小比较基準
预设值为 0,flex-basis 也可以设为 auto,表示子元素以自己的基本大小为单位

特殊响应功能 Special Responsive Features

FlexBox CSS 本身无法控制 DOM 的显示与否,透过此特殊响应功能,方便我们控制容器或子元素的显示。


fxShow
设定显示条件
範例: <div fxShow [fxShow.xs]="isVisibleOnMobile()"></div>

fxHide
设定隐藏条件
範例: <div fxHide [fxHide.gt-sm]="isVisibleOnDesktop()"></div>

ngClass
强化 Angular 中 ngClass 的样式设定
範例: <div [ngClass.sm]="{'fxClass-sm': hasStyle}"></div>

ngStyle
强化 Angular 中 ngStyle 的样式设定
範例: <div [ngStyle.xs]="{'font-size.px': 10, color: 'blue'}"></div>

响应断点


响应式的关键在于控制断点,上图中间蓝色那行就是定义断点的範围,而在上面的範例中你可能会看到像是 fxLayout.xs 这样的写法,这就是在控制主容器在 xs 断点下的布局方式,断点设定方式及适用範围请参考下表:



断点
适用範围


xs
width < 600px
sm
600px <= width < 960px
md
960px <= width < 1279px
lg
1280px <= width < 1919px
xl
1920px <= width < 5000px


lt-sm
width <= 599px
lt-md
width <= 959px
lt-lg
width <= 1279px
lt-xl
width <= 1919px


gt-xs
width >= 600px
gt-sm
width >= 960px
gt-md
width >= 1280px
gt-lg
width >= 1920px

这里你会看到 lt 和 gt 这样的前缀词,分别是代表 less then 和 greater then 的意思。


后记

这个套件虽然还没有 release 版,不过满方便使用的,比起自己写 FlexBox CSS 方便多了。大部分的功能使用 Directive 来设定布局,但除此之外,还提供了可程式化的 JavaScript API 功能,十分强大呀。


参考资料:


分享给朋友:
您可能感兴趣的文章:
随机阅读: