@angular/flex-layout
Advanced tools
@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.
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>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.
)
Angular Flex Layout provides a sophisticated layout API using FlexBox CSS + mediaQuery. This module provides Angular (v4.x and higher) developers with component layout features using a custom Layout API, mediaQuery observables,and DOM flexbox-2016 css.
The 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 Flexbox 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.
Beta.9 provides support for Angular 4.x, AOT, Universal builds. This also means that Beta.9 (or higher) will not support Angular 2.x.
Please consult our CHANGELOG for latest changes and new features.
While other Flexbox CSS libraries are implementations of:
Angular Flex Layout - in contrast - is a pure-Typescript UI Layout engine with an implementation that:
Playing with the nightly changes in master is also possible
npm install https://github.com/angular/flex-layout-builds.git
Or you can easily install the latest release from NPM using:
npm install @angular/flex-layout@latest --save
Developer Guides
Documentation
Demos
Templates
Quick Links
License: MIT
The sources for this package are in the Flex-Layout repository.
Please file issues and pull requests against that repo.
FAQs
Angular Flex-Layout =======
The npm package @angular/flex-layout receives a total of 205,012 weekly downloads. As such, @angular/flex-layout popularity was classified as popular.
We found that @angular/flex-layout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.