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