Dans cette vidéo tutorielle, le présentateur explique en détail le modèle Flexbox de CSS, en partant d’une comparaison avec les techniques antérieures (float, inline‑block) puis en montrant comment transformer un conteneur en flexbox avec `display:flex`. Il décrit les propriétés essentielles – `justify-content` (flex‑start, flex‑end, center, space‑between, space‑around), `align-items` (flex‑start, flex‑end, center, stretch) – et montre comment elles affectent l’axe principal (horizontal) et l’axe secondaire (vertical). Le cours poursuit avec les flex‑containers imbriqués, l’utilisation de `flex` pour définir des largeurs relatives, la propriété `order` pour réorganiser les éléments sans toucher au HTML, et `flex-direction` pour basculer entre les axes row et column. Des démonstrations pratiques illustrent chaque concept (redimensionnement, centrage, étirement, répartition d’espace, réordonnancement). Enfin, le présentateur souligne l’importance de Flexbox pour le design réactif, le remplaçant largement des flottements et du `inline‑block` sur des écrans de tailles variées. La vidéo se conclut par un remerciement et une invitation à la prochaine leçon.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle vidéo de CSS. Aujourd'hui, nous allons traiter les Flexbox ou les boîtes flexibles. Les Flexbox sont des conteneurs qui permettent de contrôler le débordement et l'alignement des objets qui sont intégrés dedans. En effet, avant l'intégration des Flexbox en CSS, afin de pouvoir contrôler l'alignement et le débordement des objets, on recourait soit au flottement, ou bien à la propriété display avec la valeur inline-block qui permet d'aligner les objets comme étant des inlines tout en permettant de les redimensionner. Regardons ce code HTML. Dans la balise Body nous avons intégré la balise Div identifiée par container qui contient 3 autres balises Div qui contiennent respectivement les textes div1, div2, div3 afin de pouvoir facilement les identifier au sein du navigateur. Ces 3 Div, on les a dotées de la classe items. Avec le CSS, nous avons appliqué une bordure sur le container afin de pouvoir facilement la reconnaître avec une hauteur minimum de 400 pixels et pour les items on les a dotés d'un style commun, c'est-à-dire une largeur de 500 pixels et une hauteur de 200 pixels. Ensuite on a doté chacune de ces balises avec une couleur d'arrière-plan différente. Le résultat sur le navigateur est le suivant: nous avons le container encadré par le noir et nous avons les 3 balises qui contiennent respectivement des textes qui permettent de les identifier facilement. Maintenant nous allons aller sur le CSS pour pouvoir modifier le rendu par défaut. Parce que comme vous le constatez, les divs sont alignées verticalement et c'est tout à fait normal parce que ce sont des blocs. Maintenant sur le CSS, il suffit d'appliquer display inline-block. Quand on exécute, on va voir que les balises sont alignées horizontalement. Cependant, la div verte a fait un retour automatique à la ligne parce que tout simplement il ne reste pas assez de place sur la première ligne pour la contenir. Maintenant nous allons éliminer le style display de cet emplacement et on va appliquer sur le conteneur, ça veut dire l'objet qui contient les 3 balises, on va appliquer display flex. Bon, c'est-à-dire que désormais ce conteneur est devenu une flexbox ou bien une boîte flexible. Automatiquement, regardez ce qui va se passer. On constate que ces 3 balises, ça veut dire div 1, div 2 et div 3, ils ont été intégrés sur un la même ligne. Bien sûr, leur largeur a été légèrement diminuée afin de permettre cette intégration. Autrement dit, si on ajoute une 4e ou bien une 5e balise, alors elles vont se partager le même emplacement afin qu'elles puissent toutes être incorporées sur la même ligne. Maintenant, nous allons essayer de redimensionner ces balises-là afin de les rendre plus petites. Par exemple, on va mettre 300 pixels à la place de 500 pixels. On exécute pour voir le résultat. On constate qu'ils sont toujours alignés sur la même ligne, mais il y a quand même de l'espace vide qui reste à droite. C'est normal parce qu'ils sont alignés par défaut toutes à gauche. En effet, cet alignement, il est permis grâce à la propriété justify-content. Donc avec justify-content, il y a les valeurs suivantes, par exemple flex-start qui est la valeur par défaut. Dans ce cas, tous les objets seront alignés par défaut à gauche, ou bien flex-end, dans ce cas ils sont alignés à droite. On peut aussi mettre center Pour les centrer horizontalement. Ou aussi space-between, dans ce cas ils seront éparpillés sur toute la ligne de telle sorte à mettre des espaces nécessaires entre les objets. Ou encore space-around, dans ce cas il y aura de l'espace qui sera distribué équitablement autour de tous les objets. Alors le style justify-content que l'on vient d'appliquer s'applique sur ce que l'on appelle l'axe principal. L'axe principal, c'est l'axe horizontal, et l'axe secondaire, c'est l'axe vertical. Bon, maintenant on va s'attaquer à l'axe vertical pour voir ce que l'on peut modifier. La propriété que l'on peut appliquer est align-items, et comme valeur, il peut aussi accepter flex-start ou bien flex-end ou center, etc. Si vous mettez center, dans ce cas les objets seront centrés verticalement comme ça au milieu du conteneur. Avec flex-end, ils seront placés en bas. Flex-start, ils seront placés en haut, etc. On va mettre encore center comme ça. Et voilà ce que ça donne. Bon, de la même manière, maintenant imaginez que le texte div 1, div 2, div 3 qui sont là, je veux les mettre carrément au centre de ces objets-là. Afin de faire ceci, il suffit d'aller sur ces 3 objets et de leur appliquer aussi la propriété display flex avec justify-content center et align-items center. On va faire ça. Alors là, d'ailleurs, je vais juste copier ça, pas la peine de— et là pour items, il suffit de modifier space-around par center. Regardez ce qui va se passer maintenant. Alors nous avons des textes qui sont placés au centre de ces objets. Ça veut dire le container principal qui contient un flexbox, et aussi le contenu, ça veut dire les divs qui sont intégrés dedans, sont aussi des flexbox à leur tour. Bon, maintenant on va essayer d'éliminer la hauteur des items, ça veut dire on va laisser la hauteur automatique en éliminant la propriété height. Ce qu'on aura, c'est ça. Donc ça veut dire si la hauteur, elle est juste nécessaire afin de pouvoir contenir le texte qui est dedans. Bon, imaginez que je veux étaler cette hauteur sur toute la hauteur du container. Alors dans ce cas, pour align-items, donc qui est là, celui du container, je vais mettre stretch. Quand vous faites ça, alors automatiquement les divs vont avoir la même hauteur que le container. Maintenant on va encore une fois agrandir la largeur des divs. Ici on va remettre 500 pixels comme tout à l'heure. Quand j'actualise, alors le container est totalement occupé par les divs. Ces divs-là se partagent l'espace équitablement. Imaginez que je voudrais donner plus d'espace à une de ces divs. Par exemple, je veux que la div 2 soit 2 fois plus large que la div 1 et la div 3. Alors il suffit d'aller ici sur la div 1, je vais mettre flex: 1. Même chose pour la div 3. Et pour la div 2, je vais mettre flex: 2. Bon, la propriété flex sur le conteneur, il permet tout simplement de spécifier la largeur relative. Dans ce cas, si la largeur élémentaire c'est 1, alors ici on aura le double de cette largeur. Et voilà ce que ça donne. Alors la div 2 est 2 fois plus large que la div 1 et la div 3 qui ont la valeur de flex égale à 1. Maintenant imaginez que je veux réorganiser l'application de ces divs, c'est-à-dire je veux mettre div 2 en premier, puis div 1, puis div 3. Alors il suffit d'ajouter la propriété order. Donc là, order, par exemple pour la div 1 je vais mettre 2 et pour la div 2 je vais mettre 1. Et pour la div 3, bon, je vais la laisser telle qu'elle est, ou bien je vais mettre tout simplement order 3. Alors dans ce cas, la première div qui sera appliquée, c'est la div 2. Ça veut dire, sans toucher le code HTML, juste avec le CSS, je peux modifier cet ordre. Alors la div 2, c'est la première à être appliquée, puis la div 1, puis la div 3. Quand j'actualise, on constate que la div 2 est passée à gauche et la div 1 est passée juste après. Tout à l'heure, j'ai dit que par défaut, l'axe principal des flex, c'est l'axe horizontal, et l'axe secondaire, c'est vertical. Cependant, on peut changer ce comportement grâce à la propriété flex-direction que l'on peut appliquer d'ailleurs sur le container. Alors flex-direction, par défaut c'est row, ça veut dire la ligne. Dans ce cas, rien ne va se passer, alors le style reste le même. Si maintenant on met column, ça veut dire que l'axe principal maintenant c'est la colonne, ou bien l'axe vertical, et l'axe secondaire c'est l'axe horizontal. Alors on constate que ça change de cette manière. Il faut juste procéder à une légère modification afin de pouvoir étaler les divs sur toute la ligne en éliminant width, ça veut dire la largeur, elle aussi deviendra automatique. Et du coup, le résultat que l'on obtient à la fin, c'est ça. Alors notez que les flexbox sont actuellement largement utilisés. On peut même dire qu'ils remplacent d'une manière considérable les flottements et le display inline-block parce que ça permet tout simplement de contenir les éléments d'une manière très contrôlée, surtout si vous passez d'une largeur d'écran à une largeur différente, c'est-à-dire quand vous passez d'un écran d'ordinateur à un écran plus étroit comme celui des smartphones ou bien des tablettes. Dans ce cas, vous arrivez à mieux contrôler les éléments intégrés dans des conteneurs. Merci pour votre attention et à la vidéo prochaine.
