Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m287:learningunits:lu04:aufgaben:flexbox2 [2026/04/01 14:23] – vdemir
+++ de:modul:m287:learningunits:lu04:aufgaben:flexbox2 [2026/05/06 09:13] (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. Als Basis für Ihre Arbeit können Sie gerne die Codevorlagen unten verwenden.
-{{: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 22: / Zeile 22: @@
 <code html>
 <!DOCTYPE html>
 <html lang="de">
@@ Zeile 29: / 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 box2">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>
+</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