Testez vos compétences : Flexbox
Le but de ce test de compétences est de vous aider à évaluer si vous comprenez comment les boîtes flexibles et les éléments flexibles se comportent. Vous trouverez ci-dessous quatre séries de problèmes de conception que vous pouvez résoudre en utilisant flexbox. Votre tâche consiste à corriger les problèmes.
Note : Pour obtenir de l'aide, lisez notre guide d'utilisation Testez vos compétences. Vous pouvez également nous contacter en utilisant l'un de nos canaux de communication.
Défi interactif
Tout d'abord, nous vous proposons un défi interactif amusant sur les boîtes flexibles créé par notre partenaire d'apprentissage, Scrimba (angl.).
Regardez le scrim intégré et complétez toutes les tâches sur la frise chronologique (les petites icônes fantômes) en suivant les instructions et en modifiant le code. Lorsque vous avez terminé, vous pouvez reprendre le visionnage du scrim pour vérifier comment la solution de l'enseignant·e correspond à la vôtre.
Disposition flexible 1
Dans cette tâche, nous utilisons quelques éléments de liste pour créer la navigation d'un site. Pour réaliser la tâche, utilisez les boîtes flexibles pour disposer les éléments de liste en ligne, avec un espace égal entre chaque élément.
Le point de départ de la tâche ressemble à ceci :
Voici le code sous-jacent pour ce point de départ :
<nav>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/about">À propos</a></li>
<li><a href="/products">Nos produits</a></li>
<li><a href="/contact">Contactez-nous</a></li>
</ul>
</nav>
body {
font: 1.2em / 1.5 sans-serif;
}
nav ul {
max-width: 750px;
list-style: none;
padding: 0;
margin: 0;
}
nav a:link,
nav a:visited {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
display: inline-block;
text-decoration: none;
}
nav ul {
/* Ajoutez des styles ici */
}
Lorsque la tâche est terminée, les éléments devraient ressembler à ceci :
Cliquez ici pour afficher la solution
Vous pouvez appliquer display: flex et contrôler l'espacement en utilisant la propriété justify-content :
nav ul {
display: flex;
justify-content: space-between;
}
Disposition flexible 2
Dans cette tâche, les éléments de liste sont tous de tailles différentes, mais nous voulons qu'ils soient affichés sous forme de trois colonnes de taille égale, quel que soit le contenu de chaque élément.
Question bonus : Pouvez-vous maintenant faire en sorte que le premier élément soit deux fois plus grand que les autres ?
Le point de départ de la tâche ressemble à ceci :
Voici le code sous-jacent pour ce point de départ :
<ul>
<li>Je suis petit</li>
<li>J'ai plus de contenu que le très petit élément.</li>
<li>
J'ai beaucoup de contenu. Tellement de contenu que je ne sais pas où tout
cela va aller. Je suis content que CSS soit assez bon pour gérer les
situations où nous avons plus de mots que prévu !
</li>
</ul>
body {
font: 1.2em / 1.5 sans-serif;
}
ul {
max-width: 750px;
list-style: none;
padding: 0;
margin: 0;
}
li {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
}
ul {
/* Ajoutez des styles ici */
}
li {
/* Ajoutez des styles ici */
}
Lorsque la tâche est terminée, les éléments devraient ressembler à ceci :
Cliquez ici pour afficher la solution
Il est préférable d'utiliser des raccourcis, donc dans ce scénario flex: 1 est probablement la meilleure réponse, et donc le résultat le plus optimal serait :
ul {
display: flex;
}
li {
flex: 1;
}
Pour la question bonus, ajoutez un sélecteur qui cible le premier élément et définit flex: 2; (ou flex: 2 0 0; ou flex-grow: 2) :
li:first-child {
flex: 2;
}
Disposition flexible 3
Dans cette tâche, nous voulons disposer les éléments de la liste en lignes.
Le point de départ de la tâche ressemble à ceci :
Voici le code sous-jacent pour ce point de départ :
<ul>
<li>Navet</li>
<li>Feuilles de navet</li>
<li>Achillée</li>
<li>Haricot riz</li>
<li>Rutabaga</li>
<li>Endive</li>
<li>Chou-fleur</li>
<li>Laitue de mer</li>
<li>Chou-rave</li>
<li>Amarante</li>
</ul>
body {
font: 1.2em / 1.5 sans-serif;
}
ul {
width: 450px;
list-style: none;
padding: 0;
margin: 0;
}
li {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
margin: 0.5em;
}
ul {
/* Ajoutez des styles ici */
}
li {
/* Ajoutez des styles ici */
}
Lorsque la tâche est terminée, les éléments devraient ressembler à ceci :
Cliquez ici pour afficher la solution
Cette tâche nécessite une compréhension de la propriété flex-wrap pour envelopper les lignes flexibles. De plus, pour vous assurer que vous obtenez quelque chose qui ressemble à l'exemple, vous devez définir flex: auto sur l'enfant (ou flex: 1 1 auto;).
ul {
display: flex;
flex-wrap: wrap;
}
li {
flex: auto;
}