Flex-Layout之声明式API概述

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
本文字数： 1.9k | 阅读时长 ≈ 2 分钟

翻译原文：https://github.com/angular/flex-layout/wiki/Declarative-API-Overview

静态API概述

Flex layout 的特点就是提供敏捷的语法性的指令允许开发者利用弹性盒子CSS样式来轻松直观地创建响应且自适应的布局。

这个API概述可以被视作静态的，提供一个随浏览器宽度改变而调整元素的大小和位置的用户体验。这个静态API可以被视为默认桌面布局API。
开发者应该使用响应式API来支持手机或平板设备的交互式布局配置。

Flex-Layout 是一组直观的HTML指令（aka属性）列表，可以被用于HTML容器和元素。开发者可以直接在HTML中定义他们自己的布局声明。
一个重要的基本的概念就是理解哪些API被用在DOM容器上，哪些被用在DOM容器的子元素上。

用于DOM容器的API：

HTML API Allowed values
fxLayout < direction > [wrap] row / column / row-reverse / column-reverase
fxLayoutAlign < main-axis > < cross-axis> main-axis: start / center / end / space-around / space-between; cross-axis: start / center / end / stretch
fxLayoutGap % / px / vw / vh

这些指令会影响容器中子元素的流向和布局。

用于DOM元素的API：

HTML Allowed values
fxFlex “” / px / % / vw / vh < grow> < shrink> < basis>
fxFlexOrder int
fxFlexOffset % / px / vw / vh
fxFlexAligin start / baseline / center / end
fxFlexFill,fxFill

这些指令影响宿主元素的布局和大小。注意这些API期望它们的宿主元素内置于一个弹性盒子的DOM容器里（一个块元素，它本身使用布局API来作为容器）。

用于任意元素的API ：

HTML API Allowed values
fxHide TRUE / FALSE / 0 / “”
fxShow TRUE / FALSE / 0 / “”
ngClass @extends ngClass core
ngStyle @extends ngStyle core
imgSrc @extends src attribute

下面展示的是使用容器和元素的静态API来写的一个简单的HTML标记：

1
2
3
4
5
6
7
8
9
<div fxLayout='column' class="zero">
  <div fxFlex="33" class="one" ></div>
  <div fxFlex="33%" [fxLayout]="direction" class="two">
    <div fxFlex="22%"    class="two_one"></div>
    <div fxFlex="205px"  class="two_two"></div>
    <div fxFlex="30"     class="two_three"></div>
  </div>
  <div fxFlex class="three"></div>
</div>

Flex Layout指令直接分配CSS样式内嵌到宿主元素中，这些内嵌样式会覆盖掉继承的样式、影子DOM样式，甚至是所有基于:host元素的影子DOM树形样式。

响应式API

Flex-Layout 也拥有一套巨大的响应特征来确保开发者能够轻松地改变不同显示设备之间的用户体验布局配置。更多文档资料请至 Responsive API page。

本文仅作翻译，关于弹性布局框架的相关知识，推荐博文。
后期我会抽空翻译Flex-Layout的其他文章。

请博主喝咖啡