Dies ist eine alte Version des Dokuments!
LU04.A04 - Flexbox 2
Rahmenbedingungen
| Was | Beschreibung |
|---|---|
| Produkt: | HTML-Seite mit CSS Flexbox |
| Zeit: | 40 Min. |
| Sozialform: | Einzel- oder Partnerarbeit |
| Arbeitsmittel: | Unterrichtsunterlagen, HTML-Editor, Browser |
Ausgangslage
Sie wissen, was eine Flexbox ist, und wie diese angewendet wird. Das nachfolgende Video geht etwas mehr in die Materie, gibt Ihnen also Einblick in die Möglichkeiten der Anwendungen der Flexbox.
Auftrag
Schauen Sie sich das nachfolgende Video Schritt an, und bauen das gezeigte Beispiel nach. Falls es zu schnell geht, können Sie die betroffene Stelle wiederholen.
Codevorlagen
index.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexbox Tutorial!</title> <link rel="stylesheet" href="tutorial.css"> <link rel="stylesheet" href="flexbox.css"> </head> <body> <div class="behaelter"> <div class="kind">Kind 1</div> <div class="kind">Kind 2</div> <div class="kind">Kind 3</div> <div class="kind">Kind 4</div> <div class="kind">Kind 5</div> </div> </body> </html>
flexbox.css
.behaelter { height: 400px; } .kind { width: 50px; height: 50px; }
Volkan Demir