Alles über die Eigenschaften der Flexbox

Das Konzept hinter den Flexbox-Eigenschaften besteht darin, dem Container die Möglichkeit zu geben, Breite, Höhe und Reihenfolge seiner Elemente automatisch zu ändern, um den verfügbaren Platz optimal auszufüllen. Dies kann sehr nützlich sein, um Objekte mit unterschiedlichen Bildschirmgrößen und Geräten unterzubringen. Elemente werden erweitert, um freien Speicherplatz auszufüllen, oder verkleinert, um einen Überlauf zu vermeiden.

CSS Flexbox Grid Für Anfänger

CSS ist eines der ersten und am einfachsten zu erlernenden Dinge in der Webentwicklung und -gestaltung, aber verwechseln Sie seine Einfachheit nicht mit dem Fehlen von Funktionen. Es verfügt über eine Reihe erstaunlicher Funktionen, von denen eines das relativ neue Layout-Modul ist: die Flexbox-Eigenschaften.

Flexbox-Eigenschaften sind eines der neueren Layouts, die für CSS3 verfügbar sind, und es gibt viel zu lernen. Hier erhalten wir praktische Informationen zum Layout und zur Verwendung. Bevor wir jedoch beginnen, finden Sie hier einige Hintergrundinformationen zu den Flexbox-Eigenschaften:

Was sind Layoutmodi?

CSS Flexbox Grid ist im einfachsten Sinne ein Layout-Modus. CSS verfügt über eine Reihe vorhandener Layoutmodi. Der Blocklayout-Modus (wie Anzeige: Block) gibt es schon lange. Blocklayouts sind eine gute Wahl, um vollständige Dokumente zu formatieren. Tatsächlich behandelt ein Webbrowser mehrere Elemente wie Divs und Absätze standardmäßig als Blockebene.

Ein weiterer gängiger Layout-Modus ist der Inline-Modus. Das Strong-Tag, das Input-Tag und das Anker-Tag sind Beispiele für Elemente auf Inline-Ebene. Mit den Entwicklertools von Google Chrome können Sie sogar den berechneten Stil eines Elements anzeigen, um die CSS-Eigenschaften und -Werte zu bestimmen, die auf die vom Entwickler nicht explizit festgelegten Elemente angewendet wurden.

Das relativ neuere Layout der Flexbox-Eigenschaften (Flexible Box) wurde als effizientere Methode zum Anordnen, Ausrichten und Verteilen des Raums zwischen Containerelementen entwickelt, auch wenn die Größe dieser Elemente dynamisch oder unbekannt ist. Daher der Begriff "flexibel".

Das Flexbox-Eigenschaften-Konzept

Das Wichtigste an den Flexbox-Eigenschaften ist, dass sie richtungsunabhängig sind. Während das Blocklayout vertikal und das Inline-Layout horizontal basiert, ist Flexbox keines davon. Block und Inline funktionieren in den richtigen Situationen gut, es fehlt jedoch die Flexibilität, um komplizierte oder große Anwendungen zu unterstützen, insbesondere wenn es darum geht, die Ausrichtung zu ändern, zu strecken, zu verkleinern, die Größe zu ändern und die Abmessungen der Elemente anderweitig zu ändern.

Wo werden Flexbox-Eigenschaften verwendet?

Wie jedes andere CSS-Layout wird Flexbox am besten in bestimmten Situationen verwendet. Insbesondere ist es für kleine Layouts und Komponenten einer Anwendung geeignet. Für Layouts mit größerem Maßstab ist ein Rasterlayout die klügere Wahl.

Warum wird Flexbox bevorzugt?

Viele Entwickler und Designer bevorzugen Flexbox-Eigenschaften, wann immer dies möglich ist (manchmal zu oft!). Dies liegt daran, dass die Flexbox-Eigenschaften einfacher zu verwenden sind. Die Positionierung der Elemente ist viel einfacher, sodass Sie komplexere Layouts mit weniger Code erhalten. Mit anderen Worten, es vereinfacht den Entwicklungsprozess.

Eine Anleitung zu den Flexbox-Eigenschaften

Nachdem Sie sich ein wenig mit den Flexbox-Eigenschaften und deren Funktionsweise vertraut gemacht haben, finden Sie hier eine detaillierte Anleitung zum Layout. Das Modell des Layouts besteht aus einem übergeordneten Container, der auch als Flex-Container bezeichnet wird. Die unmittelbar untergeordneten Elemente aus diesem Container werden als "flexible Elemente" bezeichnet.

Das Layout wurde im Laufe der Jahre, seit der erste Entwurf im Jahr 2009 erstellt wurde, mehrfach wiederholt und in der Syntax geändert. Die neueste Flexbox-Spezifikation wird in den folgenden Webbrowsern unterstützt:

  • Opera 17+
  • Internet Explorer 11+
  • Mozilla Firefox 28+
  • Google Chrome 29+
  • Apple Safari 6.1+
  • Android 4.4+
  • iOS 7.1+

Die in den Flexbox-Eigenschaften verwendete Terminologie

Hier sehen Sie einige grundlegende Begriffe, die im Layout der Flexbox-Eigenschaften verwendet werden:

  • Anzeige: Mit diesem Befehl wird der Flexcontainer definiert. Es kann inline oder blockiert sein, abhängig davon, ob der Flex-Inhalt für alle Elemente im Container definiert ist. Beispiel:

.container (

Anzeige: Flex; / * oder Inline-Flex * /

)

  • Reihenfolge: Flex-Elemente werden standardmäßig entsprechend der Quellreihenfolge angeordnet. Die Eigenschaft 'order' kann jedoch die Reihenfolge steuern, in der die Elemente im Container angezeigt werden. Beispiel:

.item (

bestellen: ;

)

  • Flex-Richtung: Diese Reihenfolge legt die Hauptachse fest und definiert die Richtung, in der Flex-Elemente im Container platziert werden. Flex-Elemente können hauptsächlich in vertikaler oder horizontaler Richtung angeordnet werden. Beispiel:

.container (

Flex-Richtung: Zeile | Zeilenumkehr | Spalte | Spaltenumkehr;

)

  • Flex-Grow: Diese Reihenfolge definiert die Fähigkeit des Flex-Items, automatisch zu skalieren, wenn es Platz hat. Es kann einen Wert ohne Einheit annehmen, um als Proportionen zu dienen. Dieser Wert gibt an, wie viel Platz das Objekt im Flex-Container einnehmen soll. Wenn zum Beispiel für alle Elemente die Option "Flex-Grow" auf 1 gesetzt ist, wird der verbleibende Platz im Container gleichmäßig auf alle untergeordneten Elemente verteilt. Wenn der Wert 2 ist, nimmt der verbleibende Speicherplatz das Zweifache des restlichen Speicherplatzes ein. Beispiel:

.item (

flex-grow:; / * default 0 * /

)

  • Flex-Shrink: Dies ist genau das Gegenteil von Flex-Grow, da es die Flex-Elemente bei Bedarf schrumpft. Beispiel:

.item (

Flex-Shrink:; / * default 1 * /

)

  • Flex-Basis: Diese Reihenfolge definiert eine Standardgröße für Elemente, bevor der Rest des Speicherplatzes verteilt wird. Es kann sich um eine Länge wie 5 oder 20% oder ein Keyword handeln. Das Schlüsselwort "auto" gibt an, dass die Breite und Höhe des Elements gemessen werden soll, und das Schlüsselwort "content" gibt an, dass die Größe des Elements auf dessen Inhalt basiert. Beispiel:

.item (

flex-basis: | Auto; / * default auto * /

)

  • Flex: Dies ist eine kombinierte Abkürzung für alle drei oben genannten Eigenschaften: Flex-Grow, Flex-Basis und Flex-Shrink. Die Standardeinstellung ist '0 1 auto'.

.item (

flex: keine | (||)

)

  • Inhalt ausrichten: Diese Reihenfolge definiert die Ausrichtung der Hauptachse und hilft dabei, den zusätzlichen freien Platz zu verteilen, wenn noch etwas übrig ist, wenn die Elemente unflexibel sind oder ihre maximale Größe erreicht haben. Dies hilft auch, die Ausrichtung des Elements zu steuern, wenn ein Überlauf auftritt.

.container (

Inhalt begründen: Flex-Start | Flexende | zentrum | Leerzeichen zwischen | Weltraum;

)

  • Align-Items: Hiermit wird das Standardverhalten des Layouts von Flex-Items auf der Querachse der aktuellen Linie definiert. Es handelt sich im Wesentlichen um eine Version von "Rechtfertigungsinhalt" auf der Querachse, die senkrecht zur Hauptachse verläuft. Beispiel:

.container (

Align-Items: Flex-Start | Flex-End | zentrum | Grundlinie | strecken;

)

  • Inhalt ausrichten : Mit dieser Reihenfolge werden die Linien des Containers ausgerichtet, falls auf der Querachse zusätzlicher Platz vorhanden ist. Es ist ähnlich wie "Inhalt rechtfertigen", jedoch für die Querachse anstelle der Hauptachse. Wenn es nur eine Reihe von flexiblen Elementen gibt, hat diese Eigenschaft keine Auswirkung. Beispiel:

.container (

align-content: flex-start | Flex-End | zentrum | Leerzeichen zwischen | Weltraum | strecken;

)

Flexbox-Eigenschaften verwenden

Um das Flexbox-Layout zu verwenden, können Sie einfach die Anzeigeeigenschaft für das übergeordnete HTML-Element wie folgt festlegen:

.flex-container (

Anzeige: -webkit-flex; / * Safari * /

Anzeige: Flex;

)

Wenn Sie es vorziehen, wie ein Inline-Element anzuzeigen, können Sie Folgendes eingeben:

.flex-container (

Anzeige: -webkit-inline-flex; / * Safari * /

Anzeige: Inline-Flex;

)

Sie müssen diese Eigenschaft nur für den übergeordneten Flex-Container und seine unmittelbaren Flex-Elemente festlegen. Die Container-Kinder werden automatisch zu flexiblen Gegenständen.

Empfohlene Kurse

  • Online-Kurs zu Free jQuery
  • Online-Kurs zu Free Angular JS
  • Online-Training auf Mudbox
  • Zertifizierungsschulung in Free Ruby

Flexbox-Eigenschaften - Eigenschaften des Flex-Containers

Es gibt viele Möglichkeiten, Flexbox-Eigenschaften zu gruppieren, und die einfachste Möglichkeit, sich mit ihnen vertraut zu machen, besteht darin, sie in Flex-Container- und Elementeigenschaften aufzuteilen. Wir haben gerade einige der oben genannten Flex-Container-Eigenschaften behandelt. Schauen wir uns den Rest an:

  • Flex-Richtung: Zeile oder Spalte

Die Eigenschaft flex-direction kann vertikal oder horizontal als Spalten oder Zeilen angeordnet werden. Bei Zeilenrichtung werden die flexiblen Elemente standardmäßig von links nach rechts gestapelt. Zeilenumkehr ändert diese Richtung von rechts nach links. Die Spaltenrichtung ist standardmäßig von oben nach unten, und die Spaltenumkehrfunktion kehrt diese in eine Richtung von unten nach oben um.

  • Flex-Wrap: Nowrap oder Wrap

Die Eigenschaft "Flex-Wrap" steuert, ob die untergeordneten Elemente des Flex-Containers in mehreren oder einzelnen Zeilen angeordnet sind, und in welche Richtung die neuen Zeilen gestapelt werden. Mit dem Nowrap-Wert werden flexible Elemente in einer einzelnen Zeile angezeigt, die standardmäßig auf die Breite des Containers verkleinert sind. Beim Wert für den Zeilenumbruch werden flexible Elemente in verschiedenen Zeilen von links nach rechts oder von oben nach unten angezeigt. Sie können Wrap-Reverse hinzufügen, um auch die Reihenfolge zu ändern. Der Standardwert ist nowrap.

  • Flex-Flow

Diese Eigenschaft ist im Grunde genommen eine Abkürzung, um die Eigenschaften "Biegerichtung" und "Biegung" zusammen zu setzen. Der Standardwert ist 'row nowrap'. Beispiel:

.flex-container (

Flex-Flow: ||

)

  • Inhalt begründen

Die Eigenschaft "Inhalt ausrichten" hat vier Werte: Flex-Start, um Elemente an der linken Seite des Containers auszurichten. Flex-End zum Ausrichten von Elementen an der rechten Seite; zentrieren, um an der Mitte auszurichten; Zwischenraum zum Ausrichten von Elementen mit gleichem Abstand zwischen ihnen, wobei das erste und das letzte Element an den Containerkanten ausgerichtet sind; und umlaufender Raum zum Ausrichten des flexiblen Gegenstands mit gleichem Abstand, einschließlich des ersten und des letzten Gegenstands. Flex-Start ist der Standardwert.

  • Objekte ausrichten

Diese Eigenschaft hat fünf Werte: stretch zum Skalieren von flexiblen Elementen, um die gesamte Breite oder Höhe vom Anfang bis zum Ende des Containers auszufüllen; Flex-Start zum Stapeln von Gegenständen am Kreuzstart; Flex-End zum Stapeln von Gegenständen am Kreuzende; zentrieren, um Elemente an der Mitte der Querachse auszurichten; und Grundlinie, um Elemente so auszurichten, dass ihre Grundlinien ausgerichtet sind. Stretch ist der Standardwert.

  • Inhalt ausrichten

Diese Eigenschaft richtet die Linien eines flexiblen Containers aus, wenn in der Querachse zusätzlicher Platz vorhanden ist. Die Werte sind: stretch, um den Abstand nach jeder Zeile zu verteilen; Flex-Start zum Stapeln von Gegenständen in Richtung des Kreuzstarts; Flex-End zum Stapeln von Gegenständen in Richtung des Kreuzendes; Mitte, um Gegenstände in der Mitte der Querachse zu stapeln; raum um raum um flex artikel gleichmäßig zu verteilen. Der Standardwert ist stretch.

Flexbox-Eigenschaften - Eigenschaften von Flex-Elementen

Nachdem Sie nun die Eigenschaften von Flexbox-Containern kennen, schauen wir uns die Elementeigenschaften an:

  • Bestellung

Diese Eigenschaft steuert die Reihenfolge der Darstellung der untergeordneten Elemente des Flex-Containers. Sie werden standardmäßig im Flex-Container bestellt.

.flex-item (

bestellen: ;

)

Sie können Flex-Elemente neu anordnen, ohne den HTML-Code neu strukturieren zu müssen. Der Standardwert ist Null.

  • Selbst ausrichten

Mit dieser Eigenschaft kann die Standardausrichtung eines bestimmten flexiblen Elements überschrieben werden. Sie können die Werte von align-items für diese Eigenschaft verwenden.

.flex-item (

align-self: auto | Flex-Start | Flex-End | zentrum | Grundlinie | strecken;

)

Der automatische Wert in align-self wird anhand des Werts der align-items auf dem übergeordneten Element berechnet. Wenn das Element kein übergeordnetes Element hat, wird stattdessen die Strecke verwendet.

Grundlegende Beispiele

Das ist alles, was Sie wissen müssen, um das CSS Flexbox-Rasterlayout zu verwenden. Jetzt ist es Zeit zu üben, was Sie gelernt haben. Hier einige Beispiele, die Ihnen zeigen, wie all diese Eigenschaften zusammenkommen. Beginnen wir mit etwas absolut Einfachem:

.parent (

Anzeige: Flex;

Höhe: 300px;

)

.child (

Breite: 100px;

Höhe: 100px;

Rand: Auto;

)

Dies ist ein Beispiel für eine perfekte Zentrierung. Die Werte für Höhe und Breite können nach Belieben geändert werden. Der Schlüssel hier ist, den Rand auf 'auto' zu setzen, damit der Flex-Container automatisch zusätzlichen Platz aufnimmt. Einfach genug!

Kommen wir nun zum Hinzufügen weiterer Eigenschaften: Eine Liste mit sechs Elementen mit festen Abmessungen, deren Größe automatisch angepasst werden kann. Sie müssen gleichmäßig auf die horizontale Achse verteilt sein.

.flex-container (

Anzeige: Flex;

Rechtfertigungsinhalt: Leerzeichen;

)

Als Nächstes versuchen wir, eine rechtsbündige Navigation für mittelgroße Bildschirme zu zentrieren und auf kleinen Geräten einspaltig zu gestalten.

/ * Groß * /

.navigation (

Anzeige: Flex;

Flex-Flow: Zeilenumbruch;

Rechtfertigungsinhalt: Flex-End;

)

/ * Mittlere Bildschirme * /

@media all und (max-width: 800px) (

.navigation (

Rechtfertigungsinhalt: Leerzeichen;

)

)

/ * Kleine Bildschirme * /

@media all und (max-width: 500px) (

.navigation (

Flexrichtung: Säule;

)

)

Zeit, noch einen Schritt weiter zu gehen! Versuchen wir ein Mobile-First-Layout mit drei Spalten, mit einer Fußzeile und einer Kopfzeile in voller Breite und unabhängig von der Quellreihenfolge.

.wrapper (

Anzeige: Flex;

Flex-Flow: Zeilenumbruch;

)

/ * Wir weisen alle Artikel auf eine Breite von 100% hin * /

.header, .main, .nav, .aside, .footer (

Flex: 1 100%;

)

/ * Wir verlassen uns auf die Quellcode-Reihenfolge für den Mobile-First-Ansatz * /

/ * Mittlere Bildschirme * /

@media all und (min-width: 600px) (

.aside (flex: 1 auto; )

)

/ * Große Bildschirme * /

@media all und (min-width: 800px) (

.main (flex: 2 0px; )

.aside-1 (order: 1; )

.main (order: 2; )

.aside-2 (order: 3; )

.footer (order: 4; )

)

Fazit

Dies sind nur einige grundlegende Beispiele. Mit CSS Flexbox-Rasterlayouts können Sie viel mehr herumspielen, und sie sind von unschätzbarem Wert, wenn Sie eine reaktionsschnelle Webseite erstellen möchten.

Empfohlene Artikel

In den folgenden Artikeln erfahren Sie mehr über die Flexbox-Eigenschaften, den Flexbox-Code und das CSS-Flexbox-Raster. Gehen Sie also einfach über den unten angegebenen Link.

  1. HTML vs XML - Top Unterschiede
  2. CSS3 vs CSS - Wie unterscheiden sie sich? (Infograph)
  3. HTML vs CSS Top Unterschiede
  4. HTML5 vs Flash

Kategorie:

Web-Entwicklungstools