Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html)...
Transcript of Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html)...
![Page 1: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/1.jpg)
Interaktive Medien 1. Semester Martin Vollenweider
Layout im Web — Flex Boxes
Interaktive Medien 1. Semester, Martin Vollenweider
25.07.2019
![Page 2: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/2.jpg)
2
Layouten mit CSS – Flex Boxes
Flex Box overview (2:39) Defining flex elements (3:15) Understanding flex axes (1:37) Controlling element flow (3:12) Flex Overview (24:43), freiwillig Videokurs «Little Boxes», freiwillig Visuelles Tutorial Flex Animiertes Tutorial Flex Visuelles Flex zum Testen
![Page 3: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/3.jpg)
3
Wichtigste Begriffe bei den Flex Boxes
Flex Boxes erlauben das Layouten mit HTML & CSS
![Page 4: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/4.jpg)
4
Aufbau der HTML-Struktur
Im Flex-Container wird festgelegt, dass die untergeordneten Elemente (Flex-Items) dem Flex-Muster folgen.
Weitere verschachtelte Elemente (Inhalt) sind davon nicht betroffen.
![Page 5: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/5.jpg)
5
Alle Details im Flex Box Cheatsheet sowie interaktives Tool Erstellen der Boxes
![Page 6: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/6.jpg)
6
Axen
![Page 7: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/7.jpg)
7
Spalten oder Zeilen
![Page 8: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/8.jpg)
8
Beispiel 1: justify-content: flex-start (Ausrichtung an Main Axes)
![Page 9: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/9.jpg)
9
Beispiel 2: justify-content: flex-end
![Page 10: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/10.jpg)
10
Beispiel 3: align items: flex-start (Ausrichtung an Cross Axes)
![Page 11: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/11.jpg)
11
Beispiel 4: align-content: flex-end (vertikale Ausrichtung bei mehreren Zeilen)
![Page 12: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/12.jpg)
12
Beispiel 5: horizontal und vertikal zentriert
![Page 13: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/13.jpg)
13
Übung 1 Übung 1 (layout_flex_box_01_unfertig.html)
Fertiges Beispiel Übung 1 Übung 1 fertig (layout_flex_box_01.html)
Mobile Darstellung
Desktop Darstellungen
![Page 14: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/14.jpg)
14
Übung 2 Übung 2 (layout_flex_box_02_unfertig.html)
Versuchen Sie folgendes Layout hinzukriegen:
![Page 15: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/15.jpg)
15
Mobile Darstellung Desktop Darstellung
Fertiges Beispiel Übung 2 Übung 2 fertig (layout_flex_box_02.html)
![Page 16: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/16.jpg)
16
Übung 3 Übung 3 (layout_flex_box_03_unfertrig.html). Layout:
Linker und rechter Rand sind je 2.85vw, die Spaltenbreiten 5.75vw und die Abstände dazwischen 2.3vw breit. Die Navigation ist 50px, das Moodbild 100px und die Kategorien 200px hoch. Der Abstand unterhalb Navigation und Moodbild sind 20px.
![Page 17: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/17.jpg)
17
Fertiges Beispiel Übung 3 Übung 3 fertig (layout_flex_box_03.html)
Mobile Darstellung Desktop Darstellung
![Page 18: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/18.jpg)
18
Verschachtelte Flex Boxes
Wichtige Links How Flex Box works — explained with big, colorful, animated gifs
A Visual Guide to CSS3 Flex Box Properties
Flex Box Cheatsheet
![Page 19: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/19.jpg)
19
Inhaltsverzeichnis Layouten mit CSS – Flex Boxes ......................................................................................... 2
Wichtigste Begriffe bei den Flex Boxes ............................................................................. 3
Aufbau der HTML-Struktur ............................................................................................. 4
Axen .................................................................................................................................. 6
Spalten oder Zeilen ......................................................................................................... 7
Beispiel 1: justify-content: flex-start (Ausrichtung an Main Axes) ............................. 8
Beispiel 2: justify-content: flex-end ............................................................................... 9
Beispiel 3: align items: flex-start (Ausrichtung an Cross Axes) ............................... 10
Beispiel 4: align-content: flex-end (vertikale Ausrichtung bei mehreren Zeilen) .... 11
Beispiel 5: horizontal und vertikal zentriert ................................................................ 12
Übung 1 .......................................................................................................................... 13
Fertiges Beispiel Übung 1 ............................................................................................. 13
![Page 20: Interaktive Medien 1. Semester Martin Vollenweider...Übung 3 fertig (layout_flex_box_03.html) Mobile Darstellung Desktop Darstellung 18 Verschachtelte Flex Boxes Wichtige Links How](https://reader035.fdocument.pub/reader035/viewer/2022070810/5f0946057e708231d4260941/html5/thumbnails/20.jpg)
20
Übung 2 .......................................................................................................................... 14
Fertiges Beispiel Übung 2 ............................................................................................. 15
Übung 3 .......................................................................................................................... 16
Fertiges Beispiel Übung 3 ............................................................................................. 17
Verschachtelte Flex Boxes ........................................................................................... 18
Wichtige Links ................................................................................................................ 18