LU04.A04 - Flexbox 2

Dies ist eine alte Version des Dokuments!

Was	Beschreibung
Produkt:	HTML-Seite mit CSS Flexbox
Zeit:	30 Min.
Sozialform:	Einzel- oder Partnerarbeit
Arbeitsmittel:	Unterrichtsunterlagen, HTML-Editor, Browser

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.

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.

index.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Tutorial!</title>
 
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="behaelter">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
    </div>
</body>
</html>

tutorial.css

* {
    font-family: Arial, Helvetica, sans-serif;
}
 
.behaelter {
    background-color: #ddd;
}
 
.kind:nth-child(1) {
    background-color: red;
}
 
.kind:nth-child(2) {
    background-color: green;
}
 
.kind:nth-child(3) {
    background-color: blue;
}
 
.kind:nth-child(4) {
    background-color: yellow;
}
 
.kind:nth-child(5) {
    background-color: purple;
}

flexbox.css

.behaelter {
  height: 400px;
}
 
.kind {
  width: 50px;
  height: 50px;
}

Volkan Demir

LU04.A04 - Flexbox 2

Rahmenbedingungen

Ausgangslage

Auftrag

Codevorlagen

BZZ - Modulwiki