Angular Flex-Layout

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

Angular Flex-Layout Demos

static 화면의 레이아웃 설정 하는 법은 위의 본문에 표시가 됩니다

 

기본적으로 형식은 아래와 같습니다.

layout을 동적으로 표현이 가능합니다.

<div fxLayout="row" fxLayoutAlign="center center">
 <!-- Layout Direction : row
  Alignment in Layout direction(horizontal) : center
  Alignment in Layout direction(vertical) : center
  --!>

Layout Direction :  row, column

Alignment in Layout direction (horizontal) : none, start, center, end, space-around, space-between, space-evently

Alignment in Layout direction (vertical): none, start, center, end, space-around, space-between, space-evently

 

layout의 기본 포맷을 설정이 가능 합니다

Flex to Fill Row

<div faxLayout = "row">
<!-- simple row using "flex" on 3rd element to fill available main axis --!>

 

Flex with Align-self

<div fxFlexAlgin="baseLine">
<!-- option  
 start
 center
 baseline
 end
 auto 
 stretch
 --!>
 

 

Responsive Layout Directions

Layout direction changes to 'column' for 'xs' or 'sm' viewport size

• lg= screen and min-width 1280px , max-width 1919.99px
• lt-xl = screen and max-width 1919.99px
• gt-md = screen and min-width 1280px
• gt-sm = screen and min-width 960px
• gt-xs = screen and min-width 600px

Multiple Responsive Columns

simple row with nested layout containers.

<div fxLayout ="row" fxFlex="50% fxFlex.gt-sm="25% fxHide.md></div>

<div fxLayout="row" fxFlex></div>

 

Responsive Flex Dirctives

use the show hid APIs to responseively show or hide elements:

Active MediaQuery(s)

• md = screen and min-width 960 px and max 1279.99px
• lt-lg = screen and max-width 1279.99px
• lt-xl - screen and max-width 1919.99px
• gt-sm = screen and min-width 960px
• gt-xs = screen and min-with 600px

Responsive Flex Ordering

Add the flex-order directive to a layout child to set its order position within the layout containner

 

<div flex-order ="-1">
<div flex-order ="1">
<div flex-order ="2">

<!-- 해상도 변경시 아래와 같이 순서가 변경이 가능 합니다!-->
<div flex-order.gt-md ="-1">
<div flex-order.gt-md ="2">
<div flex-order.gt-md ="1">