@angular/flex-layout

What is @angular/flex-layout?

@angular/flex-layout is a powerful layout library for Angular that provides a sophisticated API using Flexbox CSS and mediaQuery. It allows developers to create responsive and adaptive layouts with ease.

What are @angular/flex-layout's main functionalities?

Responsive Layouts

This feature allows you to create responsive layouts that adapt to different screen sizes. The example shows a row layout that changes to a column layout on extra-small screens.

<div fxLayout="row" fxLayout.xs="column">
  <div fxFlex>Item 1</div>
  <div fxFlex>Item 2</div>
  <div fxFlex>Item 3</div>
</div>

Grid Layouts

This feature allows you to create grid layouts with flexible spacing and alignment. The example shows a row layout with items taking 25%, 50%, and 25% of the available space, respectively.

<div fxLayout="row" fxLayoutGap="10px">
  <div fxFlex="25">Item 1</div>
  <div fxFlex="50">Item 2</div>
  <div fxFlex="25">Item 3</div>
</div>

Alignment and Justification

This feature allows you to align and justify content within a layout. The example shows a row layout with content centered both horizontally and vertically.

<div fxLayout="row" fxLayoutAlign="center center">
  <div fxFlex>Centered Item</div>
</div>

Show/Hide Elements

This feature allows you to conditionally show or hide elements based on screen size. The example shows text that is hidden on screens larger than small.

<div fxShow fxHide.gt-sm>
  This text is hidden on screens larger than small.
</div>

Other packages similar to @angular/flex-layout

ngx-flexible-layout

ngx-flexible-layout is another Angular library that provides a flexible layout system using CSS Flexbox. It offers similar functionalities to @angular/flex-layout but with a different API and potentially fewer features.

README

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 a custom Layout API, mediaQuery observables, and injected DOM flexbox-2016 CSS stylings.

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

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

---

Quick Links

• ChangeLog
• Gitter Room
• Discussion Forum
• Wiki Documentation

Developers

• API Documentation
• Developer Setup
• Builds + Fast Start
• Integration with Angular CLI

Demos

• Explore Online

• Source Code

• StackBlitz Templates

  • Flex-Layout Template
  • Flex-Layout + Material

---

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

Changelog

5.0.0-beta.14 (2018-03-29)

BREAKING CHANGES

• tokens: * fxFlex no longer adds display: flex; flex-direction: row by default
• validateSuffixes: * validateSuffixes is no longer exported for public use. Please use the new BreakPoints API. If you must use validateSuffixes, please use DEFAULT_BREAKPOINTS_PROVIDER_FACTORY, which is a deprecated wrapper around validateSuffixes (please note this has already been removed in the nightly builds, and will be removed completely in the next release)

BEFORE:

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

AFTER:

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

The functions can be called in the exact same manner, as DEFAULT_BREAKPOINTS_PROVIDER_FACTORY is simply a wrapper around validateSuffixes. Please note that DEFAULT_BREAKPOINTS_PROVIDER_FACTORY is deprecated in this release.

Bug Fixes

• breakpoints: add global provider for BreakPointRegistry (7cedf6f)
• demo-app: add polyfills for IE11 to demo-app (a425035)
• demo-app: fix sizing for layout-gap demo (0562fcc)
• fxFlex: apply correct flex-basis stylings (#629) (1e96cea), closes #277 #280 #323 #528 #534
• fxFlex: fix non-wrapping behavior and default fxFlex value (3cfafd1)
• fxFlex: fix wrapping in older versions of Safari (3809608)
• fxFlex: make sure not to set width/height when flex is default (b152998)
• fxLayoutGap: add proper gaps for reverse dir (3a8041d)
• layout-gap: apply correct gaps based on flex order (de72903), closes #608
• lib: resolve RegExp Issue in older versions of Safari (#643) (85e8aa2)
• release: Fix release script by removing ',' of the last item in the list (0486e85)
• ssr: fix lazy-loading functionality (d4f2514)

Features

• demo-app: add version number to header (c984937)
• demo-app: use Angular CLI to build demo and universal apps (eda12c3)
• demo-app: use/register custom breakpoints (0d4144c)
• fxLayoutGap: add gutter functionality to layout-gap (84ca5c3)
• tokens: add configuration for breakpoints and flex styles (605f4d1)

<a name="5.0.0-beta.13"></a>