Flexbox Tutorial!

====== LU04.A04 - Flexbox 2====== ==== Rahmenbedingungen ==== ^ Was ^ Beschreibung ^ | Produkt: | HTML-Seite mit CSS Flexbox | | Zeit: | 40 Min. | | Sozialform: | Einzel- oder Partnerarbeit | | Arbeitsmittel: | Unterrichtsunterlagen, HTML-Editor, Browser | ===== Ausgangslage ====== Sie wissen, was eine Flexbox ist, und wie diese angewendet wird. Das nachfolgende Video geht etwas mehr in die Materie, gibt Ihnen also Einblick in die Möglichkeiten der Anwendungen der Flexbox. ===== Auftrag ===== 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}} ===== Codevorlagen ===== **index.html**






    
    
    
    Flexbox Tutorial!

    


    
        1
        2
        3
        4
        5

**styles_vorlage.css**


* {
  margin: 0;
  padding: 0;   
    box-sizing: border-box;
}
body {
    background: #fff;
}
.box {
    height: 100px;
    width: 100px;
    background-color: skyblue;
    font-size: 1.5rem;
}

---- [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir