@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 =======
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
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.