Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m287:learningunits:lu04:aufgaben:flexbox2 [2026/04/01 15:44] – vdemir
+++ de:modul:m287:learningunits:lu04:aufgaben:flexbox2 [2026/04/01 16:35] (aktuell) – vdemir
@@ Zeile 4: / Zeile 4: @@
 ^ Was ^ Beschreibung ^
 | Produkt: | HTML-Seite mit CSS Flexbox |
-| Zeit: | 30 Min. |
+| Zeit: | 40 Min. |
 | Sozialform: | Einzel- oder Partnerarbeit |
 | Arbeitsmittel: | Unterrichtsunterlagen, HTML-Editor, Browser |
@@ Zeile 13: / Zeile 13: @@
 ===== 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.
+Schauen Sie sich das nachfolgende Video an, und bauen das gezeigte Beispiel, Schritt für Schritt, nach. Falls es zu schnell geht, können Sie die betroffene Stelle anhalten bzw. wiederholen.
 {{:de:modul:m287:learningunits:lu04:aufgaben:cssflexboxtutorial_english.mp4|Flexbox_Tutorial_English}}
@@ Zeile 30: / Zeile 30: @@
     <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">
+    <link rel="stylesheet" href="styles_vorlage.css">
 </head>
 <body>
-    <div class="behaelter">
+    <div class="flex-container">
-        <div class="kind">Kind 1</div>
+        <div class="box box1">1</div>
-        <div class="kind">Kind 2</div>
+        <div class="box bos2">2</div>
-        <div class="kind">Kind 3</div>
+        <div class="box box3">3</div>
-        <div class="kind">Kind 4</div>
+        <div class="box box4">4</div>
-        <div class="kind">Kind 5</div>
+        <div class="box box5">5</div>
     </div>
 </body>
@@ Zeile 45: / Zeile 45: @@
 </code>
-**tutorial.css**
+**styles_vorlage.css**
 <code CSS>
 * {
-    font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+    box-sizing: border-box;
 }
+body {
-.behaelter {
+    background: #fff;
-    background-color: #ddd;
 }
+.box {
-.kind:nth-child(1) {
+    height: 100px;
-    background-color: red;
+    width: 100px;
-}
+    background-color: skyblue;
+    font-size: 1.5rem;
-.kind:nth-child(2) {
-    background-color: green;
-}
-.kind:nth-child(3) {
-    background-color: blue;
-}
-.kind:nth-child(4) {
-    background-color: yellow;
-}
-.kind:nth-child(5) {
-    background-color: purple;
-}
-</code>
-**flexbox.css**
-<code CSS>
-.behaelter {
-  height: 400px;
-}
-.kind {
-  width: 50px;
-  height: 50px;
 }
 </code>