@angular/flex-layout

Ver más

Rooms zean version

por zean zungbung

Retail Shop

por Miss Iryannie Bte Zulkifli N/A

ReaScript for REAPER-Feuille 1

por Extrem Raym

Designing Layouts - The Issues

por Nick Jackson

@angular/flex-layout (Korniychuk Anton - 7 may 2017)

Responsive API

Declarative API

Child Elements (within Containers)

fxFlexFill

# Maximizes width and height of element in a layout container

@ Adds styles: margin: 0; width: 100%; height: 100%; min-width: 100%; min-height: 100%;

@ Adds styles: margin: 0; width: 100%; height: 100%; min-width: 100%; min-height: 100%;

@ Adds styles: margin: 0; width: 100%; height: 100%; min-width: 100%; min-height: 100%;

fxFlexAlign

# Works like fxLayoutAlign, but applies only to a single flexbox item, instead of all of them. CSS Rule: align-self

fxFlexOffset

# Offset a flexbox item in its parent container flow layout. @ adds margin-left to element. ! fxLayoutGap overlapping this option (in beta.8)

fxFlexOrder

# Defines the order of a flexbox item. CSS Rule: order

fxFlex

# This markup specifies the resizing of its host element within a flexbox container flow. CSS rule: flex

Containers

fxLayoutAlign

# Defines how flexbox items are aligned according to both the main-axis and the cross-axis, within a flexbox container. @ the value has 2 parts 1. main-axis (justify-content) align. Values: none *start center end space-around space-between 2. cross-axis (align-items & align-content) align. Values: none start center end *stretch

fxLayoutGap

# Defines if child items within a flexbox container should have a gap. @ adds margin-right to each child element expect the last Value units: % px vw vh

fxLayoutWrap

# Defines if child items appear on a single line or on multiple lines within a flexbox container. CSS Rule: flex-wrap Values: *"" nowrap wrap wrap-reverse Default: "" that means wrap

fxLayout

# Defines the flow order of child items within a flexbox container Values: *row column

Simple Example

# HTML

I'm above on mobile, and left on larger devices.

I'm below on mobile, and right on larger devices.

# CSS .flexDemoContainer { border: solid 1px #red; box-sizing: content-box !important; }

Setup

1. Install npm install --save @angular/flex-layout 2. Import module ... import { FlexLayoutModule } from '@angular/flex-layout'; ... @NgModule({ imports: [ ... FlexLayoutModule ], ... }) export class AppModule { }