Ein Flex-Layout gestalten

Frank L. Schad
Das CSS 3 Lernbuch
Ein Webmasters Press Lernbuch
Version 4.2.0 vom 5.8.2016
Autorisiertes Curriculum für das Webmasters Europe Ausbildungs- und Zertifizierungsprogramm.
www.webmasters-europe.org
Über den Autor
Frank L. Schad arbeitet seit vielen Jahren als Zeichner, Grafiker und Webdesigner in den unterschiedlichsten Projekten. Seit 2003 leitet er an der
Webmasters Akademie den Fachbereich Webdesign & Multimedia, ist für
das Curriculum verantwortlich, unterrichtet, schreibt Lehrbücher und —
last but not least — gestaltet Webseiten.
Das vorliegende Lernbuch ist direkt aus seiner Unterrichtspraxis heraus
entstanden.
© 2016 by Webmasters Press
www.webmasters-press.de
Webmasters Akademie Nürnberg GmbH
Neumeyerstr. 22–26
90411 Nürnberg
Germany
www.webmasters-akademie.de
Printed books made with Prince
Art.-Nr. 12b45125d1b5
Version 4.2.0 vom 5.8.2016
Das vorliegende Fachbuch ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftliche Genehmigung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung in elektronischen Systemen sowie für die Verwendung in Schulungsveranstaltungen. Die Informationen in diesem Fachbuch wurden mit
größter Sorgfalt erarbeitet. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Autoren und Herausgeber übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene fehlerhafte Angaben und deren Folgen.
Inhaltsverzeichnis
Vorwort
11
1
Einführung
12
2
CSS verwenden
14
2.1
2.2
2.3
2.4
2.5
2.6
14
3
4
5
6
Einbinden von CSS-Vorgaben in den Dateikopf
Allgemeine Syntax
Maßeinheiten
Kommentare
Browserspezifische Eigenschaften mit Herstellerpräfix (Vendor Specific Prefix)
Fragen zur Selbstkontrolle
16
18
19
19
21
Einbindung von CSS und Testen von Websites
22
3.1
3.2
3.3
3.3.1
3.3.2
3.4
22
Auslagerung der CSS-Vorgaben in eine externe Datei
Inline-Formatierungen
Webseiten testen
Der Web Inspector
Mobilgeräte testen
Fragen zur Selbstkontrolle
23
25
25
26
27
Die Verwendung von Farben
28
4.1
4.2
4.3
4.4
28
Das RGB-Farbmodell
Hexadezimale Farbzuweisung
Dezimale Farbzuweisung
Fragen zur Selbstkontrolle
28
31
32
Allgemeine Vorgaben für Ihr Dokument
33
5.1
5.2
Vererbung
Hintergrundfarben definieren
33
5.3
5.4
5.5
5.6
5.7
5.8
Die Maßeinheiten em und rem
Überschriften formatieren
Die Darstellung von strong, b, em und i definieren
Weitere Eigenschaften zur Textformatierung
Hyperlinks formatieren
Fragen zur Selbstkontrolle
34
34
39
40
40
41
43
Pseudoklassen und Pseudoelemente
45
6.1
6.1.1
6.1.2
6.1.3
6.2
6.2.1
45
Pseudoklassen
Verschiedene Zustände für Hyperlinks definieren
Elemente automatisch durchzählen
Überblick Pseudoklassen
Pseudoelemente
Initialen und andere typographische Effekte
45
47
50
51
52
6.2.2
6.3
7
Pseudoelemente für automatisch erzeugten Inhalt
Fragen zur Selbstkontrolle
52
55
Hintergründe, Konturen und Abstände
56
7.1
7.2
7.3
7.3.1
7.3.2
7.3.3
7.3.4
7.3.5
7.4
7.4.1
7.4.2
7.5
7.5.1
7.5.2
7.5.3
7.5.4
7.6
7.7
56
Hintergrundfarben
Innenabstände
Einbinden von Hintergrundbildern
Kachelmuster steuern
Hintergrundbild positionieren
Wasserzeicheneffekt
Zusammenfassen der Eigenschaften
Größenangaben für Hintergrundbilder
Here Be Dragons: Farbverläufe in CSS
Lineare Farbverläufe
Radiale Farbverläufe
Festlegen von Konturen
Konturstärke
Randstil
Konturfarbe
Alle Kontureigenschaften auf einmal definieren
Außenabstände
Fragen zur Selbstkontrolle
57
57
58
58
58
59
59
61
62
64
66
66
67
67
68
68
69
8
Klassen
71
9
Textumfluss
74
10
Größenangaben
76
10.1
10.2
10.3
10.4
10.5
76
11
12
Angaben für Breite und Höhe
Übersatz
Mindest- und Maximalgrößen
Die Maßeinheiten vw und vh
Fragen zur Selbstkontrolle
77
79
79
80
IDs und einfache Positionierung
81
11.1
11.2
11.3
81
Der Unterschied zwischen Klassen und IDs
HTML-Tags für das Seitenlayout
Fragen zur Selbstkontrolle
82
86
Positionierung von Elementen
87
12.1
12.2
12.3
12.4
12.5
87
Statische Positionierung
Relative Positionierung
Absolute Positionierung
Fixierte Positionierung
Fragen zur Selbstkontrolle
88
88
91
92
13
14
15
16
17
Ändern der Anzeigeart und bedingte Auswahlen
93
13.1
13.2
13.2.1
13.2.2
13.2.3
13.2.4
13.3
13.3.1
13.3.2
13.3.3
13.4
13.5
93
Ändern der Anzeigeart von Elementen
Positionsbedingte Auswahlen
Descendant Selector (Nachfahren-Selektor)
Child Selector (Kind-Selektor)
Adjacent Sibling Selector (Selektor für »benachbarte Geschwister«)
General Sibling Selector (Selektor für alle nachfolgenden Geschwister)
Attribut-Selektoren
Einfacher Attribut-Selektor
Tag mit Attribut-Selektor
Wertabhängige Attribut-Selektoren
Der Stern-Selektor
Fragen zur Selbstkontrolle
94
94
96
97
98
98
98
99
99
100
100
Flexible Layouts mit Flexbox
102
14.1
14.2
14.3
14.3.1
14.3.2
14.4
102
Grundlagen des Flexbox-Modells
Ein Flex-Layout gestalten
Alle Flexbox-Eigenschaften im Überblick
Eigenschaften für den Container
Eigenschaften für die enthaltenen Elemente
Fragen zur Selbstkontrolle
103
105
105
108
109
Web Fonts
111
15.1
15.1.1
15.1.2
15.1.3
15.2
15.3
111
Goodbye, Arial!
Unterstützte Formate
Konvertierung
Einbettung mit CSS
Awesome Icons — Font Awesome
Fragen zur Selbstkontrolle
111
112
114
117
118
Internet-Explorer-Optimierung
119
16.1
16.2
16.3
119
Alternative CSS-Vorgaben für den IE mit Conditional Comments
Seitenanzeige im Standardmodus
HTML5
120
121
Praxisbeispiel: Buttons mit Rollover-Effekt
122
17.1
17.1.1
17.1.2
17.1.3
17.1.4
17.1.5
17.1.6
17.1.7
17.2
17.2.1
17.2.2
17.2.3
122
Der Klassiker: Grafiken als Buttons
Allgemeine Formatierung
Hintergrundbild und Größe definieren
Ändern der Darstellungsart
Linktext formatieren
Rollover definieren
Textschatten erzeugen
Alternative: Sprites
CSS-basierte Buttons ohne Grafik
Kontur und Hintergrundfarbe hinzufügen
Ecken abrunden
Schatten hinzufügen
123
123
124
124
125
125
126
127
128
128
128
17.2.4
17.2.5
18
19
20
Farbverlauf hinzufügen
Rollover gestalten
129
129
Praxisbeispiel: Wiederkehrende Layoutelemente und Textformatierung
131
18.1
18.2
18.3
18.4
18.5
18.6
18.7
18.8
131
Projektvorgabe
Allgemeine Formatierung und Layout
Zentrierung des Inhalts
Währungszeichen anhängen und Kodierungsmethode festlegen
Pfeile
Buttons gestalten
Textfluss um Bilder und Clearfix
Buttons positionieren
132
133
134
134
135
135
139
Praxisbeispiel: Ein komplexes Layout mit HTML5- und CSS3-Elementen
140
19.1
19.2
19.3
19.4
19.4.1
19.4.2
19.4.3
19.4.4
19.4.5
19.4.6
19.5
19.6
19.6.1
19.6.2
19.6.3
19.7
19.7.1
19.7.2
19.7.3
19.7.4
19.7.5
19.8
19.9
19.10
140
Projektvorgaben
Allgemeine Formatierung
Grundlayout
Formatierung der Hauptnavigation
Entfernen der Listenpunkte
Einrückung abschalten
Horizontale Anordnung der Listenelemente
Breiten- und Höhenangaben
Konturen hinzufügen
Farbverläufe einfügen und Links formatieren
Formatierung der Subnavigation
Gestaltung des Kopfbereichs
Formatierung der Box
Formatierung der Überschrift
Logo
Gestaltung des Inhaltsbereichs
Textformatierung
Spaltensatz
Automatische Silbentrennung
Download-Links gestalten
Weiches Ein- und Ausblenden mit CSS-Transitions
Gestaltung der rechten Spalte
Schatten hinzufügen
Ecken abrunden
142
142
144
144
145
145
146
147
147
148
149
149
149
150
150
150
150
151
153
156
157
158
158
CSS-Farben
161
Lösungen der Wissensfragen
167
Index
177
Vorwort
And out of things uncoloured and transparent, we can
represent unto you all several colours. […] Also all colourations of light; all delusions and deceits of the sight, in
figures, magnitudes, motions, colours all demonstrations
of shadows. […] These are, my son, the riches of Salomon's House.
Francis Bacon, New Atlantis, London 1627
Wenn man in Foren und Blogs über Cascading Style Sheets liest, dann lassen sich die Autoren
nicht selten zu solch poetischen Schwärmereien wie »The Beauty and Harmony of CSS« oder
»CSS Zen Garden« hinreißen. Und in der Tat, die Herausarbeitung spezifischer Formen und Farben aus dem rohen, unbehauenen HTML-Quader gleicht einem alchimistischen Transformationsprozess:
Objekte lassen sich frei auf einer Webseite positionieren und mit Konturen, Hintergrundfarben, Bildern, Schatten und Transparenzen versehen. Neben der Schriftart können Texte mit
verschiedenen typografischen Mitteln wie Zeilenabstand, Laufweite, Initialen oder Spaltensatz formatiert werden. Elemente können interaktiv gestaltet werden, sodass sie ihr Aussehen
verändern, ein- und ausblenden oder animiert werden, wenn man mit der Maus darüberfährt.
Dieses Buch ist in zwei Teile gegliedert. Im ersten Teil lernen Sie die grundlegende Verwendung von CSS sowie die wichtigsten Möglichkeiten zur Gestaltung von Text und Layout. Im
zweiten Teil setzen Sie das Gelernte anhand verschiedener Übungsprojekte in die Praxis um
und lernen einige fortgeschrittene Techniken kennen. Am Ende sind Sie in der Lage, moderne
Websites vollständig mit CSS aufzubauen und zu gestalten.
Dabei wird auch besonders auf die Gestaltung flexibler Layouts Wert gelegt, die nicht auf
bestimmte Bildschirmgrößen festgelegt sind. Nicht Bestandteil dieses Grundlagenbuchs ist
hingegen das Responsive Webdesign mit Media Queries, mit deren Hilfe Sie reaktionsfähige
Websites gestalten können, deren Layout sich dynamisch an die Bildschirmgröße verschiedener Mobilgeräte anpasst. Diesem umfangreichen Thema ist der nächste Band dieser Buchreihe
gewidmet.
Frank L. Schad
Nürnberg, im November 2015
12
1
1 Einführung
Einführung
In dieser Lektion lernen Sie
➤ was Cascading Style Sheets sind und warum sie für modernes Webdesign unerlässlich
sind.
Wenn Sie schon einmal mit einem Layout- oder Textverarbeitungsprogramm gearbeitet
haben, kennen Sie vielleicht das Konzept der Stilvorlagen oder Formatvorlagen: Für die verschiedenen Elemente Ihres Dokuments wie Absätze, Überschriften, Listen, Tabellen etc. werden verschiedene Eigenschaften (Schriftart, Schriftgröße, Farbe, Einzug usw.) definiert und
diesen Elementen einmal zugewiesen. Wenn Sie nun die Eigenschaften einer Stilvorlage
ändern, ändern sich automatisch alle Elemente im gesamten Dokument, die auf dieser Stilvorlage basieren.
Mit dem Wunsch, Webseiten immer aufwendiger und präziser zu gestalten, wurde dieses Konzept in Form von Cascading Style Sheets (CSS) auf HTML-Seiten übertragen. Mit CSS ist es
möglich, universelle Formatierungsvorgaben für jedes einzelne Element Ihrer HTML-Seiten
zu machen und diese Vorgaben zentral zu verwalten und nach Belieben zu ändern. Sie können mit Hilfe von CSS HTML-Elemente exakt auf Ihrer Seite positionieren, Größen, Randstile,
Schrift- und Hintergrundfarben festlegen und Objekte sogar auf verschiedenen Ebenen übereinander platzieren.
Weiterhin erlauben CSS die Vergabe unterschiedlicher Stilvorlagen für verschiedene Ausgabegeräte. So ist es z. B. möglich, für die Darstellung einer Webseite im Browser eine andere CSSVorgabe zu definieren als für die Ausgabe auf einem Drucker — dieselbe Webseite sieht dann
im Druck komplett anders aus als im Browser. Es lassen sich auch CSS-Vorgaben für die Sprachausgabe definieren, die festlegen, mit welcher Stimme oder Betonung eine Webseite vorgelesen wird.
Unter dem Begriff Responsive Webdesign bekannt geworden ist eine Weiterentwicklung
dieses Konzepts: Weblayouts lassen sich nun dynamisch an die Bildschirmgröße verschiedener
Mobilgeräte anpassen — ist z. B. der Bildschirm zu schmal für eine Menüleiste, wird diese einfach auf ein Icon minimiert.
Mit Hilfe von CSS lässt sich also eine vollständige Trennung zwischen Form (Darstellung) und
Inhalt (Information) einer Seite erreichen: Die Darstellung ist abhängig vom Ausgabemedium,
der Inhalt ist stets derselbe und muss nicht verändert werden.
Aus diesem Grund haben CSS die ohnehin spärlichen Formatierungsmöglichkeiten, die HTML
bot, mittlerweile vollständig ersetzt. Sie sollten daher in HTML nur noch strukturelle Tags verwenden, die das Dokument in logisch gegliederte Bereiche aufteilen (Navigation, Kopfbereich, Inhaltsbereich, Fußzeile, Überschriften, Absätze, Listen etc.). Die Vorgaben, wie diese Elemente genau auszusehen haben, werden mit Hilfe von CSS gemacht.
Neben CSS gibt es noch eine Reihe weiterer Stylesheet-Sprachen für unterschiedliche Zwecke,
für Webseiten haben sich jedoch CSS vollständig durchgesetzt. CSS sind selbst kein HTML,
sondern können als Ergänzung des HTML-Standards betrachtet werden.
13.3 Attribut-Selektoren
99
<img src="bild.jpg" />
<video src="film.mp4"></video>
13.3.2
Tag mit Attribut-Selektor
Etwas spezifischer arbeitet folgende Variante:
tag[attribut]
Beispiel
input[type]
wählt alle input-Elemente aus, die das Attribut type haben, z. B.
<input type="text" />
<input type="checkbox" />
<input type="submit" />
nicht aber
<button type="submit">
13.3.3
Wertabhängige Attribut-Selektoren
Noch genauer geht es hiermit:
input[type="submit"]
wählt nur das Element <input type="submit" /> aus.
Operatoren
Mit verschiedenen Operatoren anstelle des Gleichheitszeichens können Sie die Auswahl ausweiten:
➤ Der ^= Operator wählt alle Elemente aus, die ein Attribut haben, dessen Wert mit
bestimmten Zeichen beginnt:
a[href^="http:"]
wählt alle Links aus, deren Wert im href-Attribut mit http: beginnt, z. B.
<a href="http://www.youtube.com">
nicht aber
<a href="../products/kaffeekanne.html">
100
13 Ändern der Anzeigeart und bedingte Auswahlen
➤ Der $= Operator wählt alle Elemente aus, die ein Attribut haben, dessen Wert mit einer
bestimmten Zeichenfolge endet:
img[src$=".png"]
wählt alle Bilder aus, deren Wert im src-Attribut mit .png endet.
➤ Der *= Operator wählt alle Elemente aus, die ein Attribut haben, dessen Wert ein bestimmtes Zeichen enthält:
div[id*="navi"]
wählt alle DIVs aus, deren ID die Zeichenkette navi enthält, z. B.
<div
<div
<div
<div
<div
13.4
id="navi">
id="hauptnavigation">
id="subnavi">
id="navigationsmenu">
id="navi_unten">
Der Stern-Selektor
Die »Holzhammer-Methode« schließlich ist der Stern-Selektor * . Dieser Selektor wählt alle
Elemente aus. Er wird in der Praxis häufig dazu verwendet, um z. B. das Standard-Margin des
Browsers von sämtlichen Elementen im Dokument zu entfernen:
* {
margin
margin: 0;
}
In diesem Fall müssen natürlich allen Elementen (vor allem Absätzen und Überschriften) die
gewünschten margins manuell wieder hinzugefügt werden. Dennoch ist dieses Vorgehen
meist effektiver als der umgekehrte Weg, das margin von jedem einzelnen Element zu entfernen oder anzupassen.
Wenn Sie den Stern-Selektor auf diese Weise verwenden, muss er am Beginn Ihres CSSDokuments stehen, ansonsten würde er zuvor bereits zugewiesene margins wieder entfernen!
13.5
Fragen zur Selbstkontrolle
1. Wie können Sie bewirken, dass Hyperlinks einen Absatz erzeugen?
2. Welche HTML-Elemente im nachfolgenden Code-Beispiel erhalten durch diese CSSAngabe eine rote Textfarbe?
p + p {
color
color: red;
}
13.5 Fragen zur Selbstkontrolle
<h1>Überschrift</h1>
<p>Erster Absatz.</p>
<p>Zweiter Absatz.</p>
<p>Dritter Absatz.</p>
<div class="box">
<p>Vierter Absatz.</p>
<p>Fünfter Absatz.</p>
</div>
101
102
14
14 Flexible Layouts mit Flexbox
Flexible Layouts mit Flexbox
In dieser Lektion lernen Sie
➤ das neue Flexbox-Modul zur Gestaltung flexibler Layouts kennen.
14.1
Grundlagen des Flexbox-Modells
Klassische Layouts mit float oder den Positionierungsmethoden static, relative, absolute und
fixed gehören seit Langem zum Standard im modernen Webdesign. Doch haben all diese Layoutmethoden bestimmte Limitationen, vor allem im Hinblick auf das Responsive Design, wenn
es darum geht, Elemente mit variablen Breiten und Höhen zu gestalten, die sich an verschiedene Bildschirmgrößen anpassen. So ist es mit den genannten Methoden z. B. schwierig, Elemente mit variabler Breite gleichmäßig über eine Fläche zu verteilen, oder mehreren nebeneinanderstehenden Elementen dieselbe — aber dennoch flexible — Höhe zu geben:
Abb. 14.1 Solche Layouts sind mit den klassischen Methoden schwierig: Oben: Alle drei Boxen passen ihre Höhe
dynamisch an die Höhe der Box mit dem längsten Inhalt an. Unten: Die Boxen verteilen sich proportional zu ihrem
Inhalt über die gesamte zur Verfügung stehende Breite.
Eine vollkommen andere, völlig neue Layout-Alternative bieten CSS3 deshalb mit dem Modul
Flexbox (Flexible Box). Die Grundidee hinter dem Flexbox-Layout ist, Elementen die Möglichkeit zu geben, ihre Breite und Höhe bestmöglich an den verfügbaren Platz und damit an verschiedene Bildschirmgrößen anzupassen. Ein Flex-Container vergrößert Elemente, um verfügbaren Platz aufzufüllen, oder verkleinert sie, um zu vermeiden, dass sie aus dem Container hinausragen.
Das Flexbox-Modell ist keine einzelne CSS-Eigenschaft, sondern besteht aus einer ganzen
Sammlung von Eigenschaften für die verschiedenen Komponenten eines Flex-Layouts.
14.2 Ein Flex-Layout gestalten
103
Ein solches Flex-Layout besteht aus zwei Teilen: Dem Flex-Container und den darin befindlichen Flex-Elementen (Flex Items). Beide können beliebige HTML-(Block-)Elemente sein. Der
Container dient zur Positionierung seiner Elemente: Seine Eigenschaften bestimmen, wie die
Elemente darin angeordnet, ausgerichtet und verteilt werden.
Abb. 14.2 Der Flex-Container (hier dunkelgrau) bestimmt die Anordnung der darin befindlichen Elemente (hellgrau). In
der Praxis muss der Container natürlich nicht sichtbar sein.
Das Flexbox-Modul hat eine lange Entwicklungsgeschichte mit zahlreichen Versuchen
und Irrtümern hinter sich. Für maximale Browserkompatibilität müssen die einzelnen
Eigenschaften deshalb in der Praxis mit vielen unterschiedlichen Vendor Prefixes versehen
werden. Dabei reicht es jedoch nicht aus, den verschiedenen Eigenschaften einfach -webkit oder -moz voranzustellen, sondern es handelt sich zum Teil um völlig unterschiedliche
Bezeichnungen und Namen für Werte und Eigenschaften! Die hier verwendete offizielle,
standardkonforme Schreibweise funktioniert deshalb nur in neueren Browserversionen
(mehr dazu in Abschnitt 14.3):
Browser
ab Version
IE
11
Edge
12
Firefox
28
Chrome
29
Safari
9 (iOS: 9.1)
Opera
17
Tabelle 14.1 Unterstützung für native Flexbox-Syntax ohne Herstellerpräfix (Quelle: caniuse.com/#feat=flexbox)
14.2
Ein Flex-Layout gestalten
Übung 25:
1. Öffnen Sie zum Ausprobieren die Dateien flexbox.html und flexbox.css aus dem gleichnamigen Ordner im Begleitmaterial. (Die layout.css dient nur der grundlegenden
Gestaltung des Dokuments und der Elemente.)
104
14 Flexible Layouts mit Flexbox
Im body der HTML-Datei befinden sich zwei divs mit der Klasse flex (der Klassenname
ist natürlich wie immer frei wählbar). Diese divs dienen uns als Flex-Container. Darin
befinden sich 3 bzw. 6 articles, diese sollen unsere Flex-Items werden. In den articles
steht unterschiedlich langer Blindtext (der Text in der zweiten Box ist jedoch noch
auskommentiert).
Mit CSS wurde lediglich das margin und padding angepasst. Zur besseren Unterscheidung haben die divs eine dunkelgraue, die articles eine hellgraue Hintergrundfarbe.
Die Eigenschaft box-sizing:border-box im article-Selektor sorgt dafür, dass das
padding nicht der Breite hinzugezählt wird, wie es normalerweise der Fall wäre (vgl.
Abschnitt 10.1 sowie Abschnitt 19.3).
2. Definieren wir zunächst die beiden divs grundlegend als Flex-Container. Die entscheidende Eigenschaft lautet display:flex :
.flex {
/* andere Eigenschaften */
display
display: flex;
}
Wie Sie sehen, wirkt sich diese Eigenschaft auch auf die enthaltenen articles aus: Sie
werden bereits nebeneinander gestellt, und ihre Breite passt sich ihrem Inhalt an.
Allerdings drängen sich die articles in der ersten Box noch auf der linken Seite zusammen. Dies wollen wir ändern:
3. Notieren Sie im Selektor für die Container:
.flex {
display
display: flex;
justify-content
justify-content: space-between;
}
Dadurch werden die Boxen mit gleichmäßigem Abstand über die gesamte Breite des
Containers verteilt.
Andere Werte für die Eigenschaft justify-content wären flex-start (alle Boxen links, Standardwert), flex-end (alle Boxen rechts), center oder space-around (erzeugt auch
Abstände zum linken und rechten Rand des Containers).
4. Kommentieren Sie nun den Absatz <p> in der zweiten Box des ersten Containers ein.
Sofort passt sich die Box an den Inhalt an und wird breiter.
Dieses Verhalten ist oftmals gewünscht und eine zentrale Eigenschaft der Flexbox.
Wir können es jedoch ändern:
5. Geben Sie im article-Selektor den einzelnen Boxen eine bevorzugte Breite:
.flex article {
/* weitere Eigenschaften */
flex-basis
flex-basis: 32%;
}
14.3 Alle Flexbox-Eigenschaften im Überblick
105
Nun haben die Boxen unabhängig von ihrem Inhalt dieselbe Breite, bleiben jedoch
durch die Angaben in Prozentwerten flexibel.
Das Besondere daran ist jedoch, dass auch die 6 Boxen im zweiten div zwar identische Breiten
haben, jedoch automatisch verkleinert werden, da eine Breite von 32% zu groß wäre!
Nun wird auch einer der Hauptvorteile der Flexbox sichtbar: Alle Boxen haben dieselbe Höhe!
Diese richtet sich automatisch nach der Box mit dem meisten Inhalt. Dieses Verhalten ist in
CSS mit anderen Layout-Methoden nicht so einfach zu erreichen.
Mehrzeilige Boxen
Sehen wir uns nun den zweiten Container etwas genauer an. Auch dort werden alle FlexItems in einer Reihe dargestellt. Dies ist der Standard, lässt sich jedoch ändern:
6. Wie Sie sehen, hat das zweite div bereits eine zusätzliche Klasse multiple_rows. Notieren Sie in diesem Selektor:
.multiple_rows {
flex-wrap
flex-wrap: wrap;
}
Dadurch erhalten die Boxen wieder ihre ursprüngliche, in der Eigenschaft flex-basis definierte
Breite und umbrechen in eine zweite Zeile, ähnlich wie Text. Trotzdem orientiert sich ihre Höhe
an der Box mit dem jeweils längsten Inhalt! Auf diese Weise lassen sich z. B. leicht Galerien o. ä.
mit variabler Anzahl an Boxen erzeugen.
7. Wie können Sie zum Schluss noch den margin-bottom von den letzten drei Boxen im
zweiten div entfernen?
14.3
Alle Flexbox-Eigenschaften im Überblick
Im Folgenden finden Sie alle Eigenschaften, mit denen Sie eine Flexbox »feintunen« können,
nebst den herstellerspezifischen Varianten aus den verschiedenen Entwicklungsstufen des
Flex-Moduls.
Beachten Sie, dass Sie die Eigenschaften float, clear und vertical-align in einer Flexbox
nicht verwenden können.
14.3.1
Eigenschaften für den Container
display: flex
Dies ist die wichtigste Eigenschaft. Sie definiert einen Container grundsätzlich als Flexbox und
verteilt die enthaltenen Elemente gemäß den Standardeinstellungen des Flex-Modells.
106
.container {
display
display:
display
display:
display
display:
display
display:
display
display:
}
14 Flexible Layouts mit Flexbox
-ms-flexbox;
-moz-box;
-webkit-box;
-webkit-flex;
flex;
justify-content
Bestimmt die horizontale Ausrichtung der enthaltenen Elemente.
flex-wrap
Standardmäßig versucht eine Flexbox, alle enthaltenen Elemente in einer Zeile unterzubekommen. Dies können Sie ändern, wobei wrap die Zeilen links- und wrap-reverse die Zeilen rechtsbündig anordnet:
flex-direction
Definiert die Anordnung der Boxen im Container. Sie können entweder die standardmäßige
horizontale Anordnung umkehren ( row-reverse ) oder die Boxen vertikal stapeln ( column
und column-reverse ). Letzteres »dreht« die beiden Ausrichtungs-Achsen in der Flexbox um
90°, d. h. auch die Eigenschaften justify-content und align-content verhalten sich dann umgekehrt!