Dans la première partie de ce tutoriel sur Flexbox nous avons appris comment positionner nos éléments verticalement ou horizontalement.
Nous avons vu que pour se servir de flexbox on devait créer un conteneur avec la propriété display: flex, que pour placer les éléments à la verticale ou à l’horizontale on devait se servir de la propriété flex-direction et enfin nous avons aussi vu que les éléments à l’intérieur d’un conteneur display: flex étaient flexibles et afin qu’ils gardent leur dimension, on devait gérer le retour à la ligne avec flex-wrap.
Dans cette seconde partie, nous allons apprendre comment aligner les éléments de façon beaucoup plus précise, les propriétés que nous allons voir viendront se rajouter en complément de celles que nous avons déjà vues, c’est pourquoi je vous recommande de bien maitriser la première partie avant de commencer la seconde.
Plan du cours
- Changer l’alignement horizontal des éléments
- Changer l’alignement vertical des éléments
- Centrer parfaitement nos éléments à la fois horizontalement et verticalement
- Changer l’ordre de placement des éléments
- Changer la taille d’un élément par rapport aux autres éléments d’un même conteneur.
- Choisir l’alignement vertical d’un élément en particulier
Changer l’alignement horizontal des éléments
justify-content
Cette propriété peut prendre différentes valeurs :
- justify-content: flex-start; alignement à gauche.
- justify-content: flex-end; alignement à droite.
- justify-content: center; alignement au centre.
- justify-content: space-between; crée un espace entre les éléments.
- justify-content: space-around; crée un espace autour des éléments.
*Pour bien illustrer tout ça, je vais rajouter un peu de style css.
Alignement à gauche.
justify-content: flex-start;
#conteneur{
display: flex;
justify-content: flex-start;
border: 2px solid blue;
margin: 15px;
}
Alignement à droite.
justify-content: flex-end;
Alignement au centre.
justify-content: center;
Alignement avec un espace entre les éléments.
justify-content: space-between;
Alignement avec espace autour des éléments.
justify-content: space-around; Changer l’alignement vertical des éléments
align-items
Cette propriété peut prendre différentes valeurs elle aussi :
- align-items: flex-start; alignement en haut.
- align-items: flex-end; alignement en bas.
- align-items: flex-stretch; Valeur par défaut. Les items s’étirent de façon à remplir le conteneur (tout en respectant min-width/max-width).
- align-items: center; Alignement au centre.
- align-items: baseline; Alignement des éléments sur leur ligne de base.
*Dans les exemples qui vont suivre, on rajoute une hauteur (height) de 300 px au conteneur pour que l’alignement vertical soit bien visible.
Alignement en haut.
align-items: flex-start;
#conteneur{
display: flex;
align-items: flex-start;
height: 300px;
border: 2px solid blue;
margin: 15px;
}
Alignement en bas.
align-items: flex-end;
Alignement au centre.
align-items: center;
Alignement sur la ligne de base
align-items: baseline;Pour cet exemple on va changer le font-size pour bien montrer que les éléments s’alignent en rapport avec leur ligne de base.
Pour comparer la ligne d’alignement, reprenons align-items: flex-start; qui aligne les éléments en haut du conteneur.
Centrer parfaitement nos éléments à la fois horizontalement et verticalement
Centrage horizontal: justify-content: center;
Centrage vertical: align-items: center;
#conteneur{
display: flex;
justify-content: center;
align-items: center;
border: 2px solid blue;
height: 300px;
margin: 15px;
}
Changer l’ordre de placement des éléments
order
Pour changer l’ordre de placement des éléments nous allons utiliser la propriété order.
Puis au choix soit rajouter une classe dans l’élément soit utiliser l’option nth-child().
Exemple :
- Le premier élément (rouge) va passer en dernière position.
- Le second élément (bleu) va passer en première position.
- Le troisième élément (vert) va passer en seconde position.
1 : Premier cas : je rajoute une classe à l’élément ce qui a déjà été fait pour mettre une couleur différente à chaque élément.
Dans cette classe, je rajoute la propriété order suivie de la valeur correspondant à l’ordre de positionnement que je veux donner à l’élément sélectionné.
2 : Deuxième cas, j’utilise l’option nth-child().
.element:nth-child(1){
order: 3;
}
.element:nth-child(2){
order: 1;
}
.element:nth-child(3){
order: 2;
}
Changer la taille d’un élément par rapport aux autres éléments d’un même conteneur.
flex
La propriété flex permet de pouvoir faire grossir ou rétrécir un élément.
Flex est un raccourci (short hand) des trois propriétés suivantes :
- flex-grow
- flex-shrink
- flex-basis
1 : Expansion
Flex-grow
La propriété flex-grow va définir le facteur d’expansion d’un élément relativement à la taille des autres éléments du même conteneur.
Dans cet exemple l’élément 2 va s’étendre relativement à l’élément 1 et 3.
Le mot relatif est important, flex-grow: 2; ne signifie pas que l’élément va doubler de largeur, mais que l’élément sélectionné prendra deux fois plus d’espace disponible que les autres.
La valeur par defaut est: 0
.element:nth-child(1){
flex-grow: 1;
}
.element:nth-child(2){
flex-grow: 2;
}
.element:nth-child(3){
flex-grow: 1;
}
2 : Rétrécissement
flex-shrink
La propriéte flex-shrink est la propriété inverse de flex-grow, elle va gérer la capacité d’un élément (flex-item) à rétrécir par rapport aux autres.
La valeur par defaut est: 1
On rétrécie ici le second élément.
.element:nth-child(2){
flex-shring: 2;
}
3 : Déterminer la taille initiale d’un élément en particulier :
flex-basis
flex-basis détermine la base de flexibilité utilisée comme taille initiale principale pour un élément flexible.
La valeur par defaut est: auto
Ici nous déterminons une taille initiale de 50px à l’élément 3. Les autres éléments sont à 400px je le rappelle.
Nous reviendrons sur la propriété flex dans la prochaine leçons sur les Media Queries avec flexbox.
Choisir l’alignement vertical d’un élément en particulier
align-self
align-self permet de changer le placement vertical d’un élément sans changer le placement des éléments qui l’entourent.
align-self peut avoir 5 valeurs différentes, les mêmes que align-items.
- align-self: flex-start;
- align-self: flex-end;
- align-self: flex-stretch; Valeur par défaut.
- align-self: center;
- align-self: baseline;
Dans cet exemple nous allons prendre 5 éléments et les placer tous différemment pour bien mettre en évidence toutes les valeurs que l’on peut attribuer à la propriété align-self.
Tous les éléments possédant le même font-size la propriété align-self: baseline; ne change pas le placement de l’élément par rapport à sa valeur par défaut qui est je le rappelle align-self: flex-stretch;
