Flexbox en CSS & HTML (Tutoriel) - développer des mises en page réactives

Voici ce qui t'attend dans le cours sur Flexbox en CSS et HTML.

Qu'est-ce que la mise en page Flexbox et pourquoi devrait-on l'utiliser ?

Ici, le projet est mis en place, sur lequel on travaillera ensuite.

Je présente ici la structure d'exemple et les fonctionnalités de débogage intégrées à VS Code avec les outils MS Edge. En outre, dans cette vidéo, le layout Flexbox est activé pour la première fois et la direction est définie.

Comment diviser l'espace de manière uniforme ou selon des proportions spécifiques dans la mise en page Flexbox?

Un petit exercice où l'on ne peut pas échapper à un peu de mathématiques simples.

Ici, je présente une mise en page horizontale avec deux barres latérales qui s'adapte de manière responsive à la largeur.

Les éléments enfants peuvent être alignés le long de l'axe transversal du conteneur flexible. Voici comment cela peut être configuré.

Non seulement dans le conteneur, vous pouvez définir l'alignement de tous les éléments enfants, avec align-self vous pouvez également ajuster individuellement les éléments.

Un petit exercice d'alignement individuel avec un cube.

Non seulement on peut s'aligner le long de l'axe transversal dans un conteneur flexible, mais on peut aussi ajuster l'alignement le long de l'axe principal. ;-)

Un petit exemple de la façon dont l'alignement le long de l'axe principal peut être très bien utilisé pour une mise en page fréquente.

Pour être flexible, il faut pouvoir spécifier la taille des éléments enfants indépendamment de la largeur ou de la hauteur concrète. Heureusement, il y a la propriété flex-basis, qui permet d'y parvenir. En changeant la flex-direction, une largeur devient une hauteur et vice versa. 

De combien un élément doit-il grandir s'il y a plus d'espace disponible que ce que flex-basis spécifie ? Cela peut être réglé de manière ciblée avec flex-grow.

De combien un élément doit-il rétrécir s'il n'y a pas assez d'espace disponible que ce que spécifie la flex-basis? Cela peut être réglé de manière ciblée avec flex-shrink.

Les éléments enfants peuvent non seulement rétrécir lorsqu'il y a moins d'espace disponible, mais aussi être renversés par le conteneur. Je vais vous montrer comment contrôler cela avec flex-wrap dans cette vidéo.

flex-direction et flex-wrap peuvent être combinés dans la propriété flex-flow. Cela a même du sens, même si vous voulez définir uniquement flex-direction, car flex-flow est plus court. ;-)

Une tâche à flex-wrap.

Parfois, il est nécessaire d'avoir de la distance pour ne pas rendre l'œil humain inutilement inconfortable. Heureusement, il y a une propriété CSS appelée gap qui gère exactement cela pour les éléments enfants d'un conteneur flex.

L'ordre doit être respecté, surtout sur les interfaces web, car elles doivent être faciles à utiliser. Parfois, l'ordre doit également être défini individuellement, sans déplacer les éléments dans le DOM. Pour cela, la propriété CSS order est très bien adaptée, avec laquelle on peut facilement modifier l'ordre visible des éléments.

Testons pour voir si vous avez bien compris l'ordre des choses. Ici, il y a même une deuxième possibilité d'obtenir le même résultat, mais vous l'aurez certainement aussi compris.

Il arrive très souvent que l'on veuille centrer des éléments et surtout du texte horizontalement et verticalement (!). Ce qui était un casse-tête avant Flexbox est devenu un jeu d'enfant avec Flexbox.

Qui ne connaît pas le 3 colonnes ? S'il s'adapte encore à l'espace disponible, il ne manque plus grand-chose pour un design réactif.

Y a-t-il des sites web sans formulaires? Si oui, ils ne sont pas nombreux. C'est pourquoi il est très important de les disposer de manière attrayante, ce qui, heureusement, n'est pas un problème avec Flexbox.

Très souvent, on se retrouve avec des mises en page imbriquées, mais avec Flexbox, même celles-ci ne posent plus un grand défi.

Entre-temps, il existe des clients de chat web à foison et la technologie de chatbot IA en a ajouté encore davantage. Mais comment peut-on réaliser un chat avec Flexbox ? C'est ce que je montre dans cette vidéo.

Depuis l'avènement du Web 2.0, on trouve presque sur chaque site web une galerie. Dans cette vidéo, je décris comment un tel agencement peut être réalisé de manière magnifique avec Flexbox, par exemple.

Maintenant, tout devrait être clair en ce qui concerne la mise en page Flex. Pour finir, je vais décrire ce que vous devriez avoir appris, ce que vous pouvez encore faire et quelles autres belles possibilités de mise en page CSS existent.