# angular/flex-layout

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/angular-flex-layout).**

5,843 stars · 749 forks · TypeScript · MIT · archived

## Links

- GitHub: https://github.com/angular/flex-layout
- awesome-repositories: https://awesome-repositories.com/repository/angular-flex-layout.md

## Topics

`adaptive` `angular` `engine` `flexbox` `grid` `layout` `mediaquery` `responsive`

## Description

This project is a responsive layout framework for Angular that provides a system of directives to create adaptive user interfaces using CSS Flexbox and CSS Grid. It includes specialized libraries for managing flexible box alignment and structuring complex two-dimensional page grids.

The framework features a breakpoint monitoring service to programmatically observe media query changes and trigger logic when viewport dimensions cross defined boundaries. To optimize performance, it includes a build-time CSS generator that uses SASS mixins to create static media query stylesheets, reducing the need for runtime style calculations.

The system covers a broad range of layout capabilities, including viewport-driven visibility toggling, print layout optimization, and suffix-based responsive markup. It provides tools for managing container flow, element sizing, and layout gap management for both flexbox and grid-based positioning.

## Tags

### Mobile Development

- [Angular Responsive Design](https://awesome-repositories.com/f/mobile-development/android-ecosystem/android-development/responsive-ui-design/angular-responsive-design.md) — Provides a specialized framework for implementing responsive UI adaptation specifically within Angular.

### User Interface & Experience

- [Flexbox Layouts](https://awesome-repositories.com/f/user-interface-experience/flexbox-layouts.md) — Provides flexible container layouts using the flexbox model for responsive interface design. ([source](https://github.com/angular/flex-layout/blob/master/CHANGELOG.md))
- [Breakpoint-Based Visibility Utilities](https://awesome-repositories.com/f/user-interface-experience/breakpoint-based-visibility-utilities.md) — Includes utilities for toggling the visibility of UI elements based on predefined screen width breakpoints. ([source](https://github.com/angular/flex-layout/wiki/API-Documentation))
- [Breakpoint Monitoring Services](https://awesome-repositories.com/f/user-interface-experience/breakpoint-monitoring-services.md) — Ships a service that programmatically monitors viewport dimensions to trigger logic when media query boundaries are crossed.
- [Child View Positioning](https://awesome-repositories.com/f/user-interface-experience/child-view-positioning.md) — Provides logic for resizing, ordering, and offsetting child components within a parent container. ([source](https://github.com/angular/flex-layout/wiki/API-Documentation))
- [Directive-Based Style Injection](https://awesome-repositories.com/f/user-interface-experience/css-styling/style-injections/directive-based-style-injection.md) — Provides Angular directives that translate declarative attributes into inline CSS Flexbox and Grid styles.
- [Flexbox Item Sizing](https://awesome-repositories.com/f/user-interface-experience/flexbox-item-sizing.md) — Provides controls for managing how individual items grow, shrink, and align within a flex container. ([source](https://github.com/angular/flex-layout/wiki/API-Documentation))
- [Flexbox Layout Models](https://awesome-repositories.com/f/user-interface-experience/flexbox-layout-models.md) — Implements a flexible box model to manage element alignment and spacing without writing manual CSS.
- [Grid Layout Management](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/item-positioning/dynamic-item-layout-syncing/grid-layout-management.md) — Provides a system for structuring complex two-dimensional page grids with rows and columns in Angular.
- [Grid Container Management](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/item-positioning/dynamic-item-layout-syncing/grid-layout-management/grid-container-management.md) — Defines structural columns, rows, and named areas to organize content within a two-dimensional grid container. ([source](https://github.com/angular/flex-layout/blob/master/CHANGELOG.md))
- [Grid Element Arrangement](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/list-layout-arrangements/dynamic-grid-layouts/grid-element-arrangement.md) — Defines grid areas, track sizing, and alignment for items within a two-dimensional grid container. ([source](https://github.com/angular/flex-layout/wiki/API-Documentation))
- [Layout & Positioning](https://awesome-repositories.com/f/user-interface-experience/layout-positioning.md) — Provides tools for defining the spatial arrangement and dimensions of visual elements via CSS. ([source](https://github.com/angular/flex-layout/wiki/Declarative-API-Overview))
- [Hybrid Grid and Flexbox Positioning](https://awesome-repositories.com/f/user-interface-experience/responsive-layouts/hybrid-grid-and-flexbox-positioning.md) — Combines one-dimensional flexbox and two-dimensional grid models for adaptive element positioning. ([source](https://github.com/angular/flex-layout/wiki/API-Documentation))
- [Breakpoint-Based Style Updates](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/runtime-style-updates/breakpoint-based-style-updates.md) — Provides dynamic modification of CSS styles triggered by specific viewport breakpoint activations. ([source](https://github.com/angular/flex-layout/wiki/API-Documentation))
- [Grid Layout Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/css-layout-systems/grid-layout-systems.md) — Offers a set of directives for defining responsive grid structures and column configurations.
- [Conditional Element Visibility](https://awesome-repositories.com/f/user-interface-experience/conditional-element-visibility.md) — Provides logic for showing or hiding UI components based on simple boolean states. ([source](https://github.com/angular/flex-layout/wiki/Declarative-API-Overview))
- [Custom Breakpoints](https://awesome-repositories.com/f/user-interface-experience/custom-breakpoints.md) — Enables the definition of custom screen size boundaries to replace or extend default media query definitions. ([source](https://github.com/angular/flex-layout/wiki/API-Documentation))
- [Layout Observers](https://awesome-repositories.com/f/user-interface-experience/interface-element-management/keyed-element-tracking/layout-observers.md) — Implements utilities for monitoring viewport dimensions to trigger reactive layout updates and visibility changes.
- [Suffix-Based Responsive Markup](https://awesome-repositories.com/f/user-interface-experience/suffix-based-responsive-markup.md) — Implements a declarative syntax using attribute suffixes to map style values to specific media query breakpoints.
- [Visibility Toggles](https://awesome-repositories.com/f/user-interface-experience/visibility-toggles.md) — Provides mechanisms to show or hide UI components based on the active media query or viewport size.

### Graphics & Multimedia

- [Layout Gap Management](https://awesome-repositories.com/f/graphics-multimedia/web-standard-rendering/flexbox-and-grid-layouts/layout-gap-management.md) — Adds consistent spacing and gutters between elements in flexible or grid layouts to prevent content overlap. ([source](https://github.com/angular/flex-layout/blob/master/CHANGELOG.md))

### Web Development

- [Static Style Generators](https://awesome-repositories.com/f/web-development/static-style-generators.md) — Compiles responsive layout rules into static CSS files at build time using SASS mixins to optimize runtime performance.
- [CSS Build Tools](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/style-optimization-tools/css-build-tools.md) — Includes a build-time engine that uses SASS mixins to generate static media query stylesheets.