研究多天,代码在实际项目中不能工作,顾先放一边,开始使用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
当使用
wrap
withfxLayout
来包装行或列时,开发人员应在指定子项大小时考虑间隙大小(使用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
关键字对每个子元素应用填充以添加装订线。