Apprendre à manipuler Flexbox

Antoine

Membre
Youtuber
16/7/21
1
200
1
Apprendre à manipuler Flexbox

Apprendre à manipuler Flexbox vous permettra de réaliser des mises en page complexes et des design réactifs. Dans ce tutoriel on verra les principales options et les pièges à éviter.


HTML:
<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="style.css">
    <title>FelxBox</title>
</head>
<body>

    <div class="container">
        <div class="box box-1">Box 1</div>
        <div class="box box-2">Box 2</div>
        <div class="box box-3">Box 3</div>
    </div>

</body>
</html>



CSS:
body{
    background-color: #DDDDDD;
}

.container {
    background-color: #125D98;
    height: 90vh;
    margin: 20px;
    padding: 5px;
}

.box {
    background-color: #F5A962;
    margin: 5px;
    font-size: 3rem;
}

.box-1 {
    min-height: 100px;
}

.box-2 {
    min-height: 200px;
}

.box-3 {
    min-height: 300px;
}
 
  • J'aime
Les réactions: tancraft et Chimaj
Mobile app for XenForo 2 by Appify