Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m287:learningunits:lu04:aufgaben:flexbox2 [2026/04/01 14:27] – [Codevorlagen] vdemir
+++ de:modul:m287:learningunits:lu04:aufgaben:flexbox2 [2026/04/01 16:35] (aktuell) – vdemir
@@ 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_deutsch.mp4|CSSFlexboxTutorial_Deutsch}}
+{{:de:modul:m287:learningunits:lu04:aufgaben:cssflexboxtutorial_english.mp4|Flexbox_Tutorial_English}}
 ===== Codevorlagen =====
@@ 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>
-**flexbox.css**
+**styles_vorlage.css**
 <code CSS>
-.behaelter {
+* {
-  height: 400px;
+  margin: 0;
+  padding: 0;
+    box-sizing: border-box;
 }
+body {
-.kind {
+    background: #fff;
-  width: 50px;
+}
-  height: 50px;
+.box {
+    height: 100px;
+    width: 100px;
+    background-color: skyblue;
+    font-size: 1.5rem;
 }
 </code>