Flexbox: partie 2

flexbox logo

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

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.

flexbox

Alignement à gauche.

justify-content: flex-start;

#conteneur{
display: flex;
justify-content: flex-start;
border: 2px solid blue;
margin: 15px;
}

Justify-content: flex-start;

Alignement à droite.

justify-content: flex-end;

justify-content: flex-end;

Alignement au centre.

justify-content: center;

justify-content: center;

Alignement avec un espace entre les éléments.

justify-content: space-between;

justify-content: space-between;

Alignement avec espace autour des éléments.

justify-content: space-around;
flexbox

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;
}

flexbox

Alignement en bas.

align-items: flex-end;

align-items: flex-end;

Alignement au centre.

align-items: center;

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.

align-items: baseline; font-size
align-items: baseline;

Pour comparer la ligne d’alignement, reprenons align-items: flex-start; qui aligne les éléments en haut du conteneur.

flexbox

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;
}

center block

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é.

order
order

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;
}

order

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;
}

flex-grow

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;
}

flex-shrink

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.

flex-basis
flex-basis

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.

align-self
align-self
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;

Laisser un commentaire