Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m287:learningunits:lu04:aufgaben:flexbox2 [2026/04/01 14:26] – 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>
 </html>
+</code>
+**styles_vorlage.css**
+<code CSS>
+* {
+  margin: 0;
+  padding: 0;
+    box-sizing: border-box;
+}
+body {
+    background: #fff;
+}
+.box {
+    height: 100px;
+    width: 100px;
+    background-color: skyblue;
+    font-size: 1.5rem;
+}
 </code>
 ----
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir