Nous avons donc un conteneur qui contient un ensemble d’éléments, grâce au flexBox, il est possible d’organiser leur agencement dans le bloc conteneur. Prenons pour exemple ce code : Un conteneur contenant 3 éléments.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TP flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="conteneur">
<div style="background-color:red">Element 1</div>
<div style="background-color:yellow">Element 2</div>
<div style="background-color:green">Element 3</div>
</div>
</body>
</html>Créer une page flexbox.html contenant ce code. Afficher le résultat sur un navigateur.
L’affichage de ce code empile les blocs les uns au-dessus des autres (la div est de type blocs). Modification des paramètres Dans le fichier CSS :
Créer une page style.css contenant ce code :
#conteneur{
display: flex;
}
Quel changement s'est produit ?
Pour choisir la direction, on utilise la propriété flex-direction :
#conteneur{
display: flex;
flex-direction: column;
}
Regarder le résultat sur le navigateur.
Liste des options possibles pour la propriété flex-direction :
Row : organisé sur une ligne
Column : organisé sur une colonne
Row-reverse : organisé sur une ligne dans l’ordre inverse
Column-reverse : organisé sur une colonne dans l’ordre inverse
Testez les différentes options.
Replaçons-nous dans la situation par défaut avec un conteneur limité à 300px.
#conteneur{
width:300px;
border:solid 1px;
display: flex;
}
Rallongez les textes "Element 1", "Element 2" ou "Element 3" de la page HTML. Le conteneur (en particulier sa largeur) est visible, car il est encadré. Lorsque la somme des largeurs des éléments est plus grande que sa largeur donc les éléments débordent du conteneur.
Pour gérer le comportement en cas de manque de place on dispose de la propriété flex-wrap
#conteneur{
width:300px;
border:solid 1px;
display: flex;
flex-wrap: wrap;
}
Liste des options possibles pour la propriété flex-wrap :
Nowrap : pas de retour à la ligne (il s’agit de la valeur par défaut)
Wrap : les éléments passent à la ligne s’il n’y a pas suffisamment de place.
Wrap-reverse : les éléments passent à la ligne s’il n’y a pas suffisamment de place dans le sens inverse.
Pour la gestion de l’alignement selon l'axe principal, on utilise la propriété justify-content.
Testez le code suivant :
#conteneur{
width:300px;
border:solid 1px;
display: flex;
flex-wrap: wrap;
justify-content : space-around
}
Liste des options possibles pour la propriété justify-content :
flex-start : aligner au debut
flex-end : aligner à la fin
center : aligner au centre
space-between : occuper tout l’espace disponible avec un espacement entre les blocs
space-around : occuper tout l’espace disponible avec un espacement autour des blocs
On utilise la propriété align-items.
#conteneur{
width:300px;
border:solid 1px;
display: flex;
flex-wrap: wrap;
justify-content : space-around;
align-items : flex-start
}
Liste des options possibles pour la propriété justify-content :
stretch : les éléments sont étirés sur tout l’axe (valeur par défaut)
flex-start : aligner au debut
flex-end : aligner à la fin
center : aligner au centre
baseline : aligner sur la ligne de base
Testez les différentes options.
#conteneur :nth-child(2) /* On prend le 2e élément */{
align-self : stretch ;
}
La valeur de la propriété align-items du bloc numéro 2 sera modifié avec l'option stretch.