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 [wrap] row | column | row-reverse | column-reverse
fxLayoutAlign 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: start | center | end | space-around | space-between | space-evenly | stretch; cross-axis: start | center | end | stretch
gdAlignRows 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 |  ,
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

这些指令会影响主机元素的布局和大小。请注意,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容器的子元素,这些子元素应沿主轴或横轴作为文本方向进行布局或流动。

angular/flex-layout---API概述_第1张图片

 

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. Onediv> <div>2. Twodiv> <div>3. Threediv> <div>4. Fourdiv>
div>
注意:使用wrap时,开发人员必须首先指定布局方向。
 

fxLayout + inline

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

<div fxLayout="row inline">
  <div>1. Onediv> <div>2. Twodiv> <div>3. Threediv> <div>4. Fourdiv>
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. Onediv> <div>2. Twodiv> <div>3. Threediv> <div>4. Fourdiv>
div>
 
    
 
 
 

fxLayoutGap API

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

默认模式

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

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

例子:

angular/flex-layout---API概述_第2张图片

Flex-Direction: Column
使用fxLayoutGap和Wrap

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

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

angular/flex-layout---API概述_第3张图片

解决方案:渲染布局,考虑间隙:

angular/flex-layout---API概述_第4张图片

<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>Anteriorbutton>
      <button md-button>Proximobutton>
    md-card-actions>
md-card>
网格模式

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

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

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

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

你可能感兴趣的:(Angular,CSS,bootstrap)