Veit Schiele Communications

Veit Schiele Communications

display, flex und grid

erstellt von Veit Schielezuletzt verändert: 19.03.2017 15:11 © Veit Schiele Communications GmbH, 2013–2017

Die Display-Eigenschaft ist eine der wichtigsten CSS-Anweisungen für das Layout einer Seite. Die häufigsten sind block, inline und none; auch table und inline-block sind durchaus noch gebräuchlich. Auch flex und grid werden zunehmend verwendet.

Tabellenbasierte Layouts

Tab Atkins Jr., der Hauptautor der Flexbox- und Grid-Spezifikationen sieht den wesentlichen Unterschied zwischen beiden in der Anzahl der Dimensionen:

Flexbox is for one-dimensional layouts – anything that needs to be laid out in a straight line (or in a broken line, which would be a single straight line if they were joined back together). Grid is for two- dimensional layouts. It can be used as a low-powered flexbox substitute (we’re trying to make sure that a single-column/row grid acts very similar to a flexbox), but that’s not using its full power. – Tab Atkins Jr. on www-style@w3.org

Diese Unterscheidung erleichtert die Unterscheidung bei der Verwendung von Flexbox und Grid erheblich.

flex

Mit der Einführung von Flexbox ist das erste Mal eine Layout-Anweisung zur Darstellung der Inhalte eingeführt worden. Und da alle aktuellen Browser diese Anweisungen verstehen, wird es auch nicht mehr lange dauern, bis Tabellen- und Float-basierte Layouts der Vergangenheit angehören.

Durch die display: flex-Deklaration für ein Element wird dieses zu einem flex-Container und die untergeordneten Elemente flex-Elemente. Dies kaskadiert jedoch nicht weiter, sodass die Eigenschaften nicht auf die Enkel-Elemente vererbt werden. Sowohl flex-Container wie auch flex-Elemente haben ihre eigenen flex-Eigenschaften:

Eigenschaften für Flex-Container
flex-directiondefiniert die Hauptachse der flexiblen Elemente mit den folgenden Werten:
rowDie Hauptachse des Flex-Containers ist dieselbe wie die Textausrichtung.
row-reversebewirkt das gleiche wie row nur in umgekehrter Richtung.
columnDie Hauptachse des Flex-Containers ist die gleiche wie die Block-Achse. Die Start- und Endpunkte der Hauptachse sind dieselben wie die des Schreibmodus.
column-reversebewirkt das gleiche wie column, aber in umgekehrter Reihenfolge.
Siehe auch MDN: flex-direction
flex-wrap

gibt an, ob die Flex-Elemente einer einzelnen oder mehreren Zeilen angepasst werden sollen.

Für eine vollständige Liste der Werte siehe MDN: flex-wrap.

flex-flow

Kurzschrift für flex-wrap und flex- flow.

Für eine vollständige Liste der Werte siehe MDN: flex-flow.

justify-content

legt fest, wie der Raum zwischen und um flex- Elemente in Richtung der Hauptachse verteilt sein soll.

Für eine vollständige Liste der Werte siehe MDN: justify-content.

align-items

legt fest, wie Raum zwischen und um flex- Elemente verteilt sind senkrecht zur Hauptachse. Eine vollständige Liste der align-Elemente Werte

Für eine vollständige Liste der Werte siehe MDN: flex-wrap.

align-content

gibt an, wie Flex-Elemente innerhalb des Flex-Containers verteilt werden. Die Anweisung gilt jedoch nicht, wenn die Flex- Elemente auf einer einzigen Linie verteilt sind.

Für eine vollständige Liste der Werte siehe MDN: align-content.

Eigenschaften für Flex-Elemente
order

gibt die aufsteigende Reihenfolge an, in der die Flex-Elemente angeordnet werden.

Für eine vollständige Liste der Werte siehe MDN: order.

flex-grow

definiert die Fähigkeit zu wachsen für ein Element, wenn es verfügbaren Raum gibt. Der Wert gibt de Anteil an diesem verfügbaren Raum an, ein ein Element wachsen kann.

Für eine vollständige Liste der Werte siehe MDN: flex-grow.

flex-shrink

definiert die Fähigkeit zu schrumpfen für ein Element wenn nicht genügend Platzu vorhanden ist. Der Wert gibt den Anteil an, um den das Element schrumpfen kann.

Für eine vollständige Liste der Werte siehe MDN: flex-shrink.

flex-basis

legt die Standardgröße eines Elements fest bevor jeder verfügbare Raum unter allen Flex- Elementen verteilt wird.

Für eine vollständige Liste der Werte siehe MDN: flex-basis.

flex

Kurzschrift für flex-grow, flex-shrink und flex-basis.

Für eine vollständige Liste der Werte siehe MDN: flex.

align-self

ermöglicht die Ausrichtung eines einzelnen Flex-Elements außer Kraft zu setzen.

Für eine vollständige Liste der Werte siehe MDN: align-self.

grid

CSS-Grid gibt uns die Möglichkeit ein Gestaltungsraster zu schaffen und die Positionierung der einzelnen Elemente vollständig durch CSS zu steuern. Damit wird eine klare Trennung des Gestaltungsrasters von der HTML- Textstruktur erreicht. Zusammen mit Media Queries erlaubt es den Aufbau flexibler Layouts.

Bedauerlicherweise werden CSS-Grid nicht von jedem Browser implementiert. Microsoft Edge und Internet Explorer unterstützen zumindest ältere Versionen der Spezifikation, wenn auch nur mit dem -ms--Präfix.

In einigen anderen Browsern müssen Sie die Unterstützung zunächst aktivieren. In Chrome und Opera müssen Sie die entsprechenden Änderungen vormenhmen in chrome://flags und opera://flags``, in Firefox in about://config``und dort müssen die Werte ``layout.css.grid.enabled und layout.css.grid-template-subgrid-value.enabled auf true gesetzt werden.

CSS-Grid-Terminologie
Grid-Containerähnlich wie beim Konzept derFlex-Container, wobei display: grid die direkten Kind-Elemente zu Grid-Items macht.
Grid-ElementWenn ein Eltern-Element die Eigenschaft display: grid hat, dann wird dieses Element als Grid-Element bezeichnet. Beachten Sie jedoch, dass Kinder dieses Elements nicht mehr als Grid-Elemente betrachtet werden.
Grid-TrackKann entweder die Spalte oder Zeile des Gitters sein.
Grid-LineLinien, die die Struktur des Gitters definieren.
Grid-CellEIne einzelne Gittereinheit, die von angrenzenden horizontalen und vertikalen Gitterlinien umschlossen wird.
Grid-AreaGrid ermöglicht Ihnen, einen Bereich aus mehreren Gitterzellen zu definieren.