当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

flex-layout

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者越风史

操作系统跨平台

开源组织无

适用人群未知

软件概览

Angular Flex-Layout

Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery.This module provides Angular developers with component layout features using acustom Layout API, mediaQuery observables, and injected DOM flexbox-2016 CSS stylings.

The Flex Layout engine intelligently automates the process of applying appropriateFlexbox CSS to browser view hierarchies. This automation also addresses many of thecomplexities and workarounds encountered with the traditional, manual, CSS-only application of box CSS.

The real power of Flex Layout, however, is its responsive engine. TheResponsive API enables developers to easily specifydifferent layouts, sizing, visibilities for different viewport sizes and display devices.

Getting Started

Start by installing the Angular Layout library from npm

npm i -s @angular/flex-layout @angular/cdk

Next, you'll need to import the Layout module in your app's module.

app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';
...

@NgModule({
    ...
    imports: [ FlexLayoutModule ],
    ...
});

After that is configured, you can use the Angular Layout attributes in your HTML tags for flex layout:

<div fxLayout="row" fxLayoutAlign="space-between">
</div>

Check out all of the available options for using Angular Layout in your application.

Quick Links

Demos

StackBlitz Templates

Developers

Browser Support

License

The sources for this package are in the Flex Layout repository.
Please file issues and pull requests against that repo.

License: MIT

使用案例

CSS--弹性布局（Flex-Layout）

基本概念概念：弹性布局（flex-layout）是一套css3新增的自适应布局模式，用于替代传统的div+css布局或辅助弹性布局主要是为了让盒子里面的子元素在面对容器不同宽度时都能够很好的适应。特别适合满足不同屏幕或设备。即对移动端友好。原理：给盒子设置css弹性布局的相关css属性来使用弹性布局。基本使用给容器设置css属性display:flex/inline-flex将该盒子
Flex Layout 详解

2019/5/7号二次更新：为折叠的flex item的例子增添了codePen链接。 2019/5/7号更新：补充了整体结构，如有疑问，欢迎留言。总想写flex，却一直拖——拖——拖，今天算是写完了。与以往的文章不同，这篇文章更像是写给自己看的，所以有些术语不会再解释，如看不懂，可以先去这篇文章里看看术语. 整体结构我们先看这个例子 div.parent { display: flex; w
angular6 flex-layout

npm install @angular/flex-layout --save 安装后会报错需要安装 npm install @angular/cdk npm install --save rxjs-compat
Polymer2.0 iron-flex-layout

<link rel="import" href="../../bower_components/polymer/polymer-element.html"> <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html"> <dom-module id="my-video
angular里面使用TweenMax与flex-layout

第一步 cnpm install gsap @types/greensock --save cnpm install @angular/flex-layout --save 第二步引入 import { TweenMax,Cubic } from 'gsap'; app.module.ts import { FlexLayoutModule } from '@angular/flex-layou
Vuetify笔记(2):栅格下v-layout和v-flex

Vuetify拥有一个12点的栅格系统，它使用flex-box构建，栅格用于布局应用程序的内容。它包含5种类型的媒体断点，用于定位特定的屏幕大小或方向。栅格组件的属性实际上是从它们定义的属性派生的类，这允许您轻松地将这些辅助类指定为属性，同时仍然提供在任何地方使用的类；其实vuetify的栅格与bootstrap的栅格系统是类似的。其中v-layout就是对应栅格中的一行，而v-f

flex-layout

Angular Flex-Layout

Getting Started

Quick Links

Demos

StackBlitz Templates

Developers

Browser Support

License

同类工具

相关阅读

相关文章

相关问答

相关文档