Ranger la valise
Tu fais ta valise. Chaque objet a un emballage autour. Entre deux objets, tu laisses un peu de place pour fermer.
Sur une page web, chaque élément est une boîte avec du vide autour. Pour placer les boîtes les unes à côté des autres, on utilise flexbox.
Mots-clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Boîte | Chaque élément de la page est un rectangle. | un paragraphe, un titre |
| Padding | Le vide entre le contenu et la bordure, à l’intérieur de la boîte. | padding: 20px; |
| Bordure | Le trait autour de la boîte. | border: 2px solid black; |
| Margin | Le vide à l’extérieur de la bordure, entre deux boîtes. | margin: 10px; |
| Flexbox | Une façon de ranger des boîtes en ligne ou en colonne. | display: flex; |
| Pixel | Un petit point de l’écran. On écrit px. | 20px |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
À toi : jouer avec une boîte
<div class="carte">Ceci est une boîte.</div>
<div class="carte">Une deuxième boîte.</div>
Exemple travaillé : la place prise
| Couche | Valeur | Compte pour la largeur |
|---|---|---|
| Contenu | 200px | 200 |
| Padding, des deux côtés | 20px de chaque côté | 40 |
| Bordure, des deux côtés | 2px de chaque côté | 4 |
| Margin, des deux côtés | 10px de chaque côté | 20 |
| Total de la place prise | 200 + 40 + 4 + 20 | 264 |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Contrôle rapide : la boîte
À toi de jouer
Contrôle rapide : la boîte
3 questionsTes réponses sont corrigées ici et ne sont pas conservées. Un compte garde tes résultats.
Ranger avec flexbox
Par défaut, chaque boîte div prend une ligne entière. Pour les mettre côte à côte, on écrit display: flex; sur le parent, la boîte qui les contient.
gap met un espace entre les boîtes. justify-content dit où les placer sur la ligne.
À toi : trois joueurs en ligne
<div class="rangee">
<div class="joueur">Lina</div>
<div class="joueur">Karim</div>
<div class="joueur">Zoé</div>
</div>
Les réglages de flexbox
| Réglage | Effet | Exemple |
|---|---|---|
| display: flex | Les enfants se rangent en ligne | Lina, Karim, Zoé côte à côte |
| gap: 10px | Un espace entre les enfants | 10 pixels entre chaque joueur |
| justify-content: center | Les enfants se groupent au milieu | Les joueurs au centre |
| justify-content: space-between | Les enfants se répartissent sur toute la largeur | Un joueur à gauche, un au milieu, un à droite |
| flex-direction: column | Les enfants se rangent en colonne | Les joueurs l’un sous l’autre |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.