de:modul:m287:learningunits:lu04:aufgaben:flexbox2

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m287:learningunits:lu04:aufgaben:flexbox2 [2026/04/01 14:24] – vdemirde:modul:m287:learningunits:lu04:aufgaben:flexbox2 [2026/04/01 16:35] (aktuell) – vdemir
Zeile 13: Zeile 13:
  
 ===== Auftrag ===== ===== 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 ===== ===== Codevorlagen =====
Zeile 22: Zeile 22:
  
 <code html> <code html>
 +
 <!DOCTYPE html> <!DOCTYPE html>
 <html lang="de"> <html lang="de">
Zeile 29: Zeile 30:
     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Flexbox Tutorial!</title>     <title>Flexbox Tutorial!</title>
-    <link rel="stylesheet" href="tutorial.css"> + 
-    <link rel="stylesheet" href="flexbox.css">+    <link rel="stylesheet" href="styles_vorlage.css">
 </head> </head>
 <body> <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>     </div>
 </body> </body>
 </html> </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 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir
  
  • de/modul/m287/learningunits/lu04/aufgaben/flexbox2.1775046264.txt.gz
  • Zuletzt geändert: 2026/04/01 14:24
  • von vdemir