angular/flex-layout---API概述

研究多天，代码在实际项目中不能工作，顾先放一边，开始使用bootstrap作为多浏览器兼容

在线演示地址：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

https://tburleson-layouts-demos.firebaseapp.com/#/docs

 

 

声明性 API 概述

From: https://github.com/angular/flex-layout/wiki/Declarative-API-Overview

 

静态API概述

Angular Layout功能提供了智能的语法指令，允许开发人员使用Flexbox和CSS Grid轻松直观地创建响应式和自适应布局。

此处的API大纲被视为静态，并提供一个UX，可在浏览器窗口宽度更改时调整元素大小和位置。静态API可以被视为默认的桌面布局API。

开发人员应使用Responsive API支持移动设备或平板电脑设备的备用布局配置

 Angular Layout API是HTML指令（又名属性）可用在HTML的容器和元素一起使用的一个直观的列表。开发人员将直接在HTML中以声明方式定义其布局，而不是使用传统的CSS样式表。

一个重要的基本概念是理解在DOM 容器上使用哪些API 与在这些容器中的DOM子元素上使用的API。

 

DOM容器的API：

HTML	API	Allowed values
fxLayout	<direction> [wrap]	row | column | row-reverse | column-reverse
fxLayoutAlign	<main-axis> <cross-axis>	main-axis: start | center | end | space-around | space-between | space-evenly; cross-axis: start | center | end | stretch | space-between | space-around | baseline
fxLayoutGap	% | px | vw | vh
gdAlignColumns	<main-axis> <cross-axis>	main-axis: start | center | end | space-around | space-between | space-evenly | stretch; cross-axis: start | center | end | stretch
gdAlignRows	<main-axis> <cross-axis>	main-axis: start | center | end | space-around | space-between | space-evenly | stretch; cross-axis: start | center | end | stretch
gdAreas	names separated by |, e.g. `gdAreas="area1	area2
gdAuto	row | column | dense | row dense | column dense	gdInline for inline-grid
gdColumns	any valid input for grid-template-columns	gdInline for inline-grid ! at the end means grid-auto-columns
gdRows	any valid input grid-template-rows	gdInline for inline-grid ! at the end means grid-auto-rows
gdGap	% | px | vw | vh	gdInline for inline-grid

These directives affect the flow and layout children elements in the container

 应用于DOM元素的API:

HTML	Allowed values
fxFlex	"" | px | % | vw | vh | <grow> <shrink> <basis>,
fxFlexOrder	int
fxFlexOffset	% | px | vw | vh
fxFlexAlign	start | baseline | center | end
fxFlexFill, fxFill
gdArea	string name for the area as defined in gdAreas
gdColumn	any valid value for grid-column
gdRow	any valid value for grid-row
gdGridAlign	<row-axis> <cross-axis>

这些指令会影响主机元素的布局和大小。请注意，API期望它们的宿主元素位于DOM容器内（'block'元素本身使用容器的Layout 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标记：

 

<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>

Angular Layout指令直接将内容分配给主机元素。这些内嵌样式会覆盖元素上的继承样式，ShadowDOM样式甚至ShadowDOM树样式:host

 

 

fxLayout API

fxLayout指令常用于DOM容器的子元素，这些子元素应沿主轴或横轴作为文本方向进行布局或流动。

 

fxLayout Options

Shown below are the supported fxLayout directive values and their resulting CSS stylings on the hosting element container:

Value	Equivalent CSS
'' (default)	flex-direction: row
row	flex-direction: row
row-reverse	flex-direction: row-reverse
column	flex-direction: column
column-reverse	flex-direction: column-reverse

fxLayout + wrap

默认情况下，flex项不会包裹在其容器中。以前的fxlayout wrap被弃用，取而代之的是只将wrap参数作为fxlayout指令的辅助选项添加。

<div fxLayout="row wrap">
  <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>

注意：使用wrap时，开发人员必须首先指定布局方向。

fxLayout + inline

有些情况下，开发人员希望使用inline flex css display属性而不是默认属性。Angular Layout 通过接受fxlayout指令的第二个参数提供此选项，如下所示：

<div fxLayout="row inline">
  <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>

注意：使用内联时，开发人员必须首先指定布局方向。

fxLayout Side-Effects

对fxLayout值的更改将导致以下指令更新和修改其元素样式:

• fxLayoutGap
• fxFlex
• fxLayoutAlign

 

 

 

 

 

fxLayoutAlign API

The fxLayoutAlign directive should be used on DOM containers whose children should be aligned on the main and cross-axis (optional)

<div fxLayout="row" fxLayoutAlign="center center">
  <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>

fxLayoutGap API

所述fxLayoutGap指令 应使用上，以指定在一个Flexbox的容器内的儿童余量的间隙（例如嵌套在fxLayout容器内）。存在辅助模式以启用在主机元件上应用边缘的装订线系统。

默认模式

• margin-right当父容器flex-direction==“行”时使用
• margin-bottom当父容器flex-direction==“列”时使用

需要注意的是最后一个子项将不具有规定的保证金缺口; 仅指定内部间隙。此外， fxLayoutGap不响应被尊重的流向：column-reverse或row-reverse使用。

例子：

Flex-Direction: Column

使用fxLayoutGap和Wrap

当使用wrapwith fxLayout来包装行或列时，开发人员应在指定子项大小时考虑间隙大小（使用fxFlex）。

问题：渲染布局没有间隙考虑因素：

解决方案：渲染布局，考虑间隙：

<md-card fxFlex fxFlexAlign="start">

    <md-card-content>
      <div fxLayout fxLayout.xs="column wrap" fxLayoutGap="25px">
        <md-input-container fxFlex="calc(50% - 25px)">
          <input mdInput placeholder="Name">
        </md-input-container>
        <md-input-container fxFlex="calc(50% - 25px)">
          <input mdInput placeholder="Occupation">
        </md-input-container>
        <md-input-container fxFlex="calc(50% - 25px)">
          <input mdInput placeholder="Company">
        </md-input-container>
      </div>
    </md-card-content>

    <md-card-actions>
      <button md-button>Anterior</button>
      <button md-button>Proximo</button>
    </md-card-actions>
</md-card>

网格模式

要fxLayoutGap与gutter系统一起使用，只需将fxLayoutGap="值 grid"即可，例如：

<div fxLayoutGap="16px grid"><div>Section 1</div><div>Section 2</div><div>Section 3</div></div>

这通过向主元素应用边距和向每个子元素反向填充来创建gutter系统。除此更改外，它与默认模式完全相同。它还考虑了flex-order和hidden元素，并具有与默认模式相同的响应能力。

请注意，与标准间隙功能不同，除了主元素上的边距之外，fxLayoutGap使用grid关键字对每个子元素应用填充以添加装订线。