Flex-Layout implementieren in Angular

1. Probleme mit CSS-basierter Flexbox
2. Das Flex-Layout in Angular
3. Schritte zum Implementieren des Flex-Layouts in Angular

In diesem Tutorial wird erläutert und demonstriert, wie Sie das Angular-Flex-Layout verwenden.

Angular Flex Layout ist eine Angular-Komponente, die ein Flexbox-basiertes responsives Layoutsystem implementiert. Damit können wir Layouts erstellen, die auf mobilen Geräten und Desktop-Bildschirmen gut reagieren.

Flexbox ist ein Layoutmodus, der Elemente im Container nach verfügbarem Platz und der im Quellcode angegebenen Reihenfolge anordnet, was bedeutet, dass er sich automatisch an die Größe des Bildschirms anpasst.

Dies unterscheidet sich von anderen Layoutmodi wie Gitter oder absolute Positionierung, bei denen Elemente explizit Positionen festgelegt haben.

Probleme mit CSS-basierter Flexbox

CSS-basierte Flexbox ist eine einfache und intuitive Möglichkeit, Layouts zu erstellen, aber bei der Verwendung dieser Methode treten einige Probleme auf. Eines der Hauptprobleme ist die fehlende Unterstützung für ältere Browser wie IE 9, IE 10, Safari 5 und Opera 12.

Ein weiteres Problem mit CSS-basierter Flexbox ist, dass es nicht gut mit responsivem Design funktioniert. Dies liegt daran, dass es schwierig ist, ein Layout auf verschiedenen Bildschirmgrößen gut aussehen zu lassen, ohne zusätzlichen Code oder Bilder hinzuzufügen.

Die Menge an CSS, die für Flexbox-CSS generiert wird, ist enorm (>250 KB), und wir müssen die untergeordneten Flexbox-Stile ändern, wenn wir die Layoutrichtung ändern. Benutzerdefinierte Haltepunkte für Medienabfragen werden ebenfalls nicht unterstützt.

Die vorangehenden Probleme wurden durch die Verwendung eines Angular Flex-Layouts behoben. Angular Flex Layout ist eine reine TypeScript-UI-Layout-Engine, die Layouteinstellungen über HTML-Markup (Layout-API) angibt.

Das Flex-Layout in Angular

Das Flex-Layout von Angular ist eine neue Layout-Engine für Angular, die in Version 4.0 eingeführt wurde. Flex-Layouts sind ein untergeordnetes Element des CSS Flexible Box Layout Module (oder einfach Flexbox).

Flex-Layouts ermöglichen eine natürlichere und intuitivere Art, festzulegen, wie Inhalt in einem Container angeordnet werden soll. Dies kann erfolgen, indem die zentrale Achse definiert wird, die bestimmt, wie Flex-Elemente im Container verteilt werden, und dann eine oder mehrere Sekundärachsen angegeben werden, die ihre Größe und Position relativ zu anderen Elementen definieren.

Die Hauptvorteile der Verwendung eines Angular-Flex-Layouts sind:

• es ist einfacher zu verwenden als andere Optionen;
• Sie können schnell ansprechende Designs erstellen;
• Es ist nicht auf nur zwei Dimensionen wie Floats oder Inline-Block beschränkt;
• Es hat mehr Optionen als CSS Grid.

Um responsive Layouts mit Standard-CSS-Flexbox oder CSS-Raster zu erstellen, müssen wir mithilfe von Medienabfragen komplizierten CSS-Code schreiben. Es ist auch schwierig zu verstehen.

Wir können jedoch Flexbox-Attribute verwenden, um Flexbox-Layoutparameter direkt in der HTML-Vorlage mit dem neuen Angular-Flexbox-Layout zu deklarieren.

Schritte zum Implementieren des Flex-Layouts in Angular

Das Angular-Flex-Layout ermöglicht es Entwicklern, ansprechende UI-Layouts zu erstellen. Es ist für die Verwendung im Browser konzipiert und unterstützt mobile und Desktop-Umgebungen.

Das Tutorial führt Sie durch die folgenden Schritte:

Lassen Sie uns anhand der oben genannten Schritte ein Angular-Flex-Layout-Beispiel besprechen.

TypeScript-Code:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent  { }

HTML Quelltext:

<div fxLayout="column" fxLayoutAlign="center">
<mat-card fxFlex="100">
<div fxLayout="column">
    <div fxFlex="60" class="action-blurb">Home</div>
    <div fxFlex="90" class="action-blurb" fxFlexOffset="20">Contact US</div>
</div>
</mat-card>
</div>

Klicken Sie hier, um die Live-Demonstration des obigen Codes zu überprüfen.