@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.
The sources for this package are in the main Angular Flex-Layout repo. Please file issues and pull requests against that repo.
License: MIT
FAQs
Angular Flex-Layout =======
The npm package @angular/flex-layout receives a total of 176,709 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
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.