interaktive medien 1. semester martin vollenweider...Übung 3 fertig (layout_flex_box_03.html)...
TRANSCRIPT
Interaktive Medien 1. Semester Martin Vollenweider
Layout im Web — Flex Boxes
Interaktive Medien 1. Semester, Martin Vollenweider
25.07.2019
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
3
Wichtigste Begriffe bei den Flex Boxes
Flex Boxes erlauben das Layouten mit HTML & CSS
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.
5
Alle Details im Flex Box Cheatsheet sowie interaktives Tool Erstellen der Boxes
6
Axen
7
Spalten oder Zeilen
8
Beispiel 1: justify-content: flex-start (Ausrichtung an Main Axes)
9
Beispiel 2: justify-content: flex-end
10
Beispiel 3: align items: flex-start (Ausrichtung an Cross Axes)
11
Beispiel 4: align-content: flex-end (vertikale Ausrichtung bei mehreren Zeilen)
12
Beispiel 5: horizontal und vertikal zentriert
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
14
Übung 2 Übung 2 (layout_flex_box_02_unfertig.html)
Versuchen Sie folgendes Layout hinzukriegen:
15
Mobile Darstellung Desktop Darstellung
Fertiges Beispiel Übung 2 Übung 2 fertig (layout_flex_box_02.html)
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.
17
Fertiges Beispiel Übung 3 Übung 3 fertig (layout_flex_box_03.html)
Mobile Darstellung Desktop Darstellung
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
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
20
Übung 2 .......................................................................................................................... 14
Fertiges Beispiel Übung 2 ............................................................................................. 15
Übung 3 .......................................................................................................................... 16
Fertiges Beispiel Übung 3 ............................................................................................. 17
Verschachtelte Flex Boxes ........................................................................................... 18
Wichtige Links ................................................................................................................ 18