Apprenez CSS Flexbox en 5 minutes - Un tutoriel pour les débutants

Une introduction rapide au module de mise en page populaire

Dans cet article, vous apprendrez les bases de CSS Flexbox, qui est devenue une compétence incontournable pour les développeurs Web et les concepteurs au cours des deux dernières années.

Nous utiliserons une barre de navigation comme exemple, car il s'agit d'un cas d'utilisation très typique de Flexbox. Cela vous présentera ses propriétés les plus utilisées du module tout en laissant de côté celles qui ne sont pas aussi critiques.

J'ai également créé un cours gratuit en 12 parties sur Flexbox. Vérifiez-le ici si vous êtes intéressé!

Maintenant, commençons!

Votre premier layout Flexbox

Les deux principaux composants d'une mise en page Flexbox sont le conteneur et les éléments .

Voici le code HTML de notre exemple, qui contient un conteneur avec trois éléments:

 Home Search Logout 

Avant de transformer cela en une disposition Flexbox, les éléments seront empilés les uns sur les autres comme ceci:

J'ai ajouté un peu de style, mais cela n'a rien à voir avec Flexbox.

J'ai ajouté un peu de style, mais cela n'a rien à voir avec Flexbox.

Pour transformer cela en une mise en page Flexbox, nous allons simplement donner au conteneur la propriété CSS suivante:

.container { display: flex; } 

Cela positionnera automatiquement les éléments bien le long de l'axe horizontal.

Si vous souhaitez vérifier le code réel, vous pouvez vous rendre sur ce terrain de jeu Scrimba.

Maintenant, mélangeons un peu ces éléments.

Justifier le contenu et aligner les éléments

Justify-content et align-items sont deux propriétés CSS qui nous aident à distribuer les éléments dans le conteneur. Ils contrôlent la façon dont les éléments sont positionnés le long de l' axe principal et de l' axe transversal .

Dans notre cas (mais pas toujours), l'axe principal est horizontal et l'axe transversal est vertical:

Dans cet article, nous allons seulement regarder justify-content, car j'ai constaté que je l'utilise beaucoup plus que align-items. Cependant, dans mon cours Flexbox, j'explique les deux propriétés en détail.

Centrons tous les éléments le long de l' axe principal en utilisant justify-content:

.container { display: flex; justify-content: center; } 

Ou nous pouvons le définir sur space-between, ce qui ajoutera de l'espace entre les éléments, comme ceci:

.container { display: flex; justify-content: space-between; } 

Voici les valeurs que vous pouvez définir justify-content:

  • flex-start ( par défaut )
  • extrémité flexible
  • centre
  • l'espace entre
  • espace autour
  • espace-uniformément

Je vous recommande de jouer avec ces derniers et de voir comment ils se déroulent sur la page. Cela devrait vous donner une bonne compréhension du concept.

Contrôler un seul élément

Nous pouvons également contrôler des éléments uniques . Disons que nous voulons, par exemple, conserver les deux premiers éléments sur le côté gauche, mais déplacer le logoutbouton sur le côté droit.

Pour ce faire, nous utiliserons la bonne vieille technique de réglage de la marge auto.

.logout { margin-left: auto; } 

Si nous voulons que l' searchélément et l' logoutélément soient poussés vers le côté droit, nous ajouterons simplement le margin-leftà l' searchélément à la place.

.search { margin-left: auto; } 

Cela poussera l'élément de recherche aussi loin que possible sur le côté droit, ce qui poussera à nouveau l'élément de déconnexion avec lui:

La propriété flex

Jusqu'à présent, nous n'avons eu que des éléments de largeur fixe. Mais que faire si nous voulons qu'ils soient réactifs? Pour y parvenir, nous avons une propriété appelée flex. Cela rend les choses beaucoup plus faciles que l'ancienne façon d'utiliser les pourcentages.

Nous allons simplement cibler tous les éléments et leur attribuer une flexvaleur de 1.

.container > div { flex: 1; } 

Comme vous pouvez le voir, il étire les éléments pour remplir tout le conteneur.

Dans de nombreux cas, vous voudrez probablement que l'un des éléments prenne la largeur supplémentaire et ne définisse ainsi que l'un d'entre eux pour avoir une largeur flexible. Nous pouvons, par exemple, faire en sorte que l' searchobjet occupe tout l'espace supplémentaire:

.search { flex: 1; } 

Avant de terminer cet article, je tiens à mentionner que la propriété flex est en fait un raccourci de trois propriétés: flex-grow , flex-shrink et flex-base . Cependant, l'apprentissage de ceux-ci prend plus de cinq minutes, donc cela sort du cadre de ce didacticiel.

Si vous souhaitez les apprendre, j'explique en détail les trois propriétés dans mon cours Flexbox gratuit.

Maintenant que vous avez appris les bases, vous serez certainement prêt à suivre mon cours complet et à devenir un maître Flexbox!

Merci d'avoir lu! Je m'appelle Per Borgen, je suis le co-fondateur de Scrimba - le moyen le plus simple d'apprendre à coder. Vous devriez consulter notre bootcamp de conception de sites Web réactifs si vous souhaitez apprendre à créer un site Web moderne à un niveau professionnel.