salut et bienvenue dans cette nouvelle vidéo aujourd'hui je vous propose de découvrir ensemble une propriétés css plutôt sympa j'ai nommé les flex box donc les flex boxe c'est un nouveau système de display qui va vous permettre de piloter depuis un élément par an le positionnement des éléments enfants les uns par rapport aux autres et globalement vous allez pouvoir mais crée des layettes relativement compliqué beaucoup plus simplement qu'en utilisant les flottes ou en utilisant le discutable donc tout de suite si vous vous rendez sur canal use au niveau du support ses supporter à partir d'internet explorer 10 et sur tous les autres navigateurs modernes donc si vous décidez de ne pas supporter bc ancien navigateur vous pouvez commencer à l'utiliser dès aujourd'hui alors en revanche attention lorsque vous voulez utiliser les flex boxe sur internet explorer 10 et aussi sur internet explorer 11 notamment sur le dise il utilise une syntaxe qui est différente donc il faudra sûrement utilisez sur votre css un système pour autres aux poteaux préfixé et convertir les règles pour qu'elle soit comprise sur ie10 lorsque je vous propose dans cette vidéo on va d'abord parler du théorique c'est à dire on va voir les différentes propriétés que on a en plus avec ce display flex box et ensuite ce que l'on fera c'est qu'on fera des exemples concrets où on verra comment résoudre des problèmes de la vie quotidienne comment créer un menu avec les éléments et se passer de manière égale gérer un système de sidebar gérer un système de petites mosaïques et ainsi de suite ainsi de suite comme ça ça va nous permettre de voir pas mal de cas plutôt variés lorsque je vais faire c'est que je vais supprimer parce que j'ai fait pour l'exemple hop on va partir d'un css et html vide histoire de ne pas partir de rien alors pour notre exemple je vais créer au niveau de mon body d'ailleurs voir même retiré ce truc là voilà donc on va partir sur notre body haut niveau on va créer une 1re div que l'on va appeler mail et dans cette diva ce que je vais faire c'est que je vais créer différentes images et pour cela je vais utiliser le service playes sol dit les soldes et si vous ne connaissez pas c'est tout simplement un système qui vous permet de mettre des petites images avec une taille bidan donc là on va prendre voilà cette image là et on va prendre des images au format 150 350 voilà ce sera juste pour tester donc pour utiliser les flèches boxe il suffit au niveau de notre élément par an donc ici c'est notre élément qui a la classe mind de rajouter un display flex donc au niveau de mon css je vais lui dire que pour les éléments qui ont la classe mais je rajoute un display 2 points flex automatiquement si je fais ça vous allez voir que les images vont bouger ce qui va faire part des fois en fait c'est qui va essayer de prendre tous les éléments et les mettre sur la même ligne et donc c'est à dire qu'il va coller les éléments les uns par rapport aux autres là il voit que les images ont déjà une tare et 250 par 150 du coup bah il valait les 550 950 et après six ans n'a plus images que l'on peut entrer ben il va les laisser sur le côté et là c'est ce que vous voyez à cet endroit là alors ensuite vous avez des propriétés pour pouvoir piloter la manière d'aligner les éléments dont par défaut les aliments les éléments sont alignées sous forme de colonne c'est ce que vous voyez ici mais vous pouvez lui donner une direction différente pour cela que vous allez utiliser la propriété flex direction et vous avez quatre directions possibles euros dans ce cas là ça veut dire que vous voulez que ça s'affiche sous forme d'une ligne qui va de gauche à droite vous pouvez mettre retirer diverses pour aller dans le sens inverse c'est à dire que les éléments qui seront premiers dans le code html sera en dernier au niveau visuel alors ce sera pas forcément visible ici mais si je mets une image ensemble leur sens et que je mets dans mon css re par défaut comme ceux ci à l'image s'empare sans apparaît ici si je mets un coup de rôtir y verse dans ce cas là hop elle va être mrc elle sera en dernier à cet endroit ensuite vous avez aussi la possibilité de préciser que vous voulez que la direction sont en colonne dans ce cas là ce qu'il fera sais qu'il mettra les éléments les uns en dessous des autres alors automatiquement il écarte les éléments on va voir ça dans une autre propriété mais là haut up automatiquement nos différents éléments sans pile sous forme de colonnes et de la même façon on a colonnes rivère ce pour inverser les éléments alors si vous voulez pas qu'il fasse un petit peu n'importe quoi vous pouvez lui dire aussi qu'il doit aller à la ligne lorsqu'il ya plus d'élément qui ne peut en rentrée pour cela vous avez une autre propriété qui est la propriété flex prat vous mettez flex frappe de points et par défaut c'est à nove rap c'est à dire qu'il ne va pas la ligne il continue à rendre les éléments donc là dès que je mets un flex frappe automatiquement il détecte que là il ne peut plus rentrer d'éléments et du coup il met les éléments suivants à la ligne donc de la même façon que vous avez levrat frais vers ce qui vous permet de faire la chose en sens inverse les éléments qui sont censés la ligne il émettra avant bourse un petit peu particulier mais si jamais vous avez besoin c'est important de savoir que c'est là et par défaut cette propriété comme je voulais 10 et traille à la valeur nos frappes ce qui veut dire ne va jamais un ennemi donc ces deux éléments là peuvent être regroupées dans une seule et même propriété qui est la propriété flex tirer flou vous pouvez mettre dans ce cas là le flex d'ericsson donc nous on voulait aller en ligne et ensuite en seconde dose valeur vous allez m si vous voulez brad ou pas là je m'ai fait que sous l'eau aux frappes voilà donc c'est un petit raccourci si vous voulez éviter d'écrire deux fois de propriété de valeur donc après vous avez aussi la possibilité de gérer comment doivent être espacées les éléments les uns par rapport aux autres alors là c'est un petit peu bizarre mais ils ont pas prêts fixé sa part flex il s'appelle juste qu'il faille tirer quand tu es au niveau des valeurs vous avez center donc ça veut dire que les éléments doivent doivent être centrés si je mets center ici les éléments vont rester coller mais ils vont être centré sur la page vous avez le flex start qui veut dire il faut les mettre au début de l'élément qui a le flex donc la salle et collera gauche flex on savait que le rat à droite et ensuite y en a un qui est vraiment pratique c'est le space tirés seront donc space round10 mais globalement tu dois mettre des espaces entre chaque élément pour tous les rentrées il faut que cet espace soit le même partout et vous avez la même chose en space between donc globalement ça veut dire mais des espaces entre chaque élément mais pas sur les côtés externe donc là vous voyez que ça colle les deux éléments aux extrémités sur le côté et après mais c'est un espace autour et pour la seconde ligne ou en a un petit peu plus espace b pareil la ligne les éléments convenablement vous avez aussi à notre système pour la ligne manque du vertical donc lajus que je vais faire c'est que m'a dit qui a la classe mais je vais lui ai donné une hauteur particulière et je vais donner six ans 600 pixels et on va mettre ça en oublie gris clair histoire que vous voyez un petit peu la différence est là ça fait un petit peu n'importe quoi parce qu' il est temps les éléments donc c'est justement cette valise là qui va nous permettre d'empêcher ce comportement donc le aligner tirer items ce par défaut à la valeur stretch ça veut dire étant les éléments pour qu'ils rentrent tous de la même façon que pour le htv rick hansen vous avez le flec start qui veut dire beaux arts est d'aligner les éléments de manière incorrecte mais par contre aligne les sur l'apport de la ligne du haut flex en deçà les alignera sur la ligne du bas et celle qui peut vous intéresser c'est la center donc nouvellement centre directement les éléments alors attention ça ne centre pas les éléments à proprement parler donc on peut se dire ouais c'est bizarre pourquoi ils collent pas ça à ça ça c'est une autre propriété qui va permettre de gérer ça c'est la ligne contact aline quand êtes vous permet au sein des éléments qui vont être en display au sein des éléments qui vont être affectés par le display flex de gérer comment vont être positionnés les éléments si vous voulez vous pouvez imaginer ça comme injustifiée contente mais plutôt pour l'espace vertical donc vous mettez à lignes étirées contre et vous avez un petit peu les mêmes propriétés si vous mettez plex start tous les éléments vont s'aligner par rapport aux l'ex tirer inde mais tous les éléments vont s'aligner par rapport au banc et encore une fois vous avez aussi center qui permet d'aligner les éléments au niveau du centre et vous avez un petit peu comme le justifie qu'on tente la possibilité de faire un space a rendu un spirituel si vous mettez ce pays se rendent à y mettra un espace entre chaque élément et si vous mettez à space between les tran espace entre chaque élément mais pas on est en bas voilà et de la même façon par défaut c'est à la valeur stretch qui donne un globalement un effet qui est à peu près similaire au space se rendent donc attention cette partie à l'income tax ne sert vraiment que si vous avez plusieurs lignes et si je retiens les éléments ici ici on n'a qu'une seule ligne 1 le en ligne comptent maintenant absolument ou prennent effet parce que ben laissez le à l'item ce qui va déterminer comment vont être alignés les éléments voilà donc globalement c'est tout ce qu'il ya à savoir sur le display flex mais de la même façon on a la possibilité de piloter au niveau des enfants qu'est ce qui va se passer et les enfants peuvent aussi avoir des propriétés particulières donc là ce que je vais faire c'est que je vais créer une classe images sur chacune des images pour pouvoir les sélectionner plus simplement et on va dire je veux faire quelque chose sur la première image donc au niveau des éléments qui sont empreintes d'un display flex vous avez la possibilité de piloter l'ordre et pour cela vous avez une propriété qui sont-elles order et qui prenant part à m lanthier qui permettra de déterminer dans quel ordre vous avez placé les éléments donc par exemple je peux lui dire ici je veux que le first ride proposition 2 et je veux que le second enfant donc une th street side 2 soit en premier et dans ce cas là bas ce que ça va faire ce que ça va inverser les choses donc là ça va marcher que si je les deux éléments mais hop vous voyez que cet élément là est maintenant second et cet élément est en premier on verra ça un petit peu plus en profondeur lorsque l'on fera un petit layher d'un petit peu plus complexe une autre propriété particulière c'est le flex gros donc le flex gros vous permet d'indiquer comment l'élément droit s'agrandir par rapport à l'espace qui reste en niveau de la page race est un petit peu particulier mais si jamais vous mettez ici un flex groupe pas de deux et on va dire que toutes les images on part des trous un plex co je vais remettre un petit peu plus d'image mais ce qui se passe c'est que lorsqu'il doit distribuer en fait là le positionnement des éléments et l'espace restant cet élément là qu'il ya un flex gros de 2 mai par rapport à l'espace restant il en prendra deux fois plus alors attention ça ne veut pas dire que l'élément sera deux fois plus grand que les autres si j'ai spect vous voyez qui a pas un ratio de fois de nom c'est par rapport à l'espace restant comment il doit s'agrandir donc ça sera utile en l'occurrence lorsque vous avez les éléments qui sont en stretch on le voit aussi je retire ma partie flex gros mais éléments ont un espace dès que je refais un coup de flex 0 automatiquement mais éléments prennent tout l'espace qui leur est alloué donc attention parce que le flex gros fait en sorte que tous les éléments mais occupe toute l'aide tout l'espace et du coup ça change un peu le comportement que l'on pourrait avoir par défaut pareil ça va véritablement dépendre des cas et il faudra et on prend une fois ce sera un petit peu plus clair avec les exemples que je données et de la même façon on a une autre propriété qui la propriété quasiment inverse le flex fric qui veut dire que lorsqu'on a plus assez d espace centre est cet élément-là sera l'élément qui va être réduit le plus en corrélation avec ses deux propriétés la flex gros et flex frais que vous avez notre propriété qui le flex basis qui vous permet d'indiquer la base de calcul pour ensuite utiliser le gros et le chemin quitte donc le gros lots shrink pour pouvoir faire leurs calculs ont besoin de savoir l'espace qui reste en est il devine cet espace un petit peu par rapport à la taille des éléments dans ce que vous pouvez faire c'est lui dit à bob par défaut je veux que mes éléments donc là ici on va mettre un plex basis je veux que toutes mes images empreintes 50 % de la taille de l'écran est automatiquement voilà c'est cette base là qui va être utilisée ensuite pour le calcul du fleix funk et du flex cros donc encore une fois et c'est vraiment spécifique et on verra dans des cas la plupart du temps c'est vrai que les flex gros flèche fric et flex base ici on les utilisera pas et enfin si jamais vous voulez écrire ça en une seule fois vous avez juste une propriété flex qui prendra en premier paramètre le flex gros en second paramètre le flex fring ou rien et un troisième paramètre la base donc ici si je remets 50% ça et qui voit la même chose que ce que j'ai écrit précédemment donc c'est un petit peu particulier mais on verra ça correspondait cas d'utilisation vous inquiétez pas c'est vrai que là dit comme ça ça peut paraître un petit peu inutile mais à vrai rétablissement des cas d'utilisation pour ça enfin dernière propriété sur un élément c'est la possibilité de l'aligner différemment donc un petit peu comme le ahly temse vous pouvez mettre un aligner tirer self et lui dire comment la ligne par exemple ici je vais dire je veux que cet élément soient alignés en bas et ici je vais retirer la partie flex automatiquement le premier élément la première image vasseur situé alignés en bas et de la même façon je peux choisir de la ligne ans ça peut être pratique suivant certains cas si vous avez un élément que vous voulez et auquel vous voulez donner l'alignement un petit peu différent des autres voilà globalement pour la théorie concernant les flex boxe lorsque je vous propose ces quelques petits exemple concret histoire de voir des cas d'utilisation des flexions dans le premier cas c'est typiquement un petit système de mosaïque lorsque je vais faire ce que je vais mettre des images avec différents formats les armes sous les eaux donc là au niveau de ma page up je les crée une diva je vais lui mettre la classe mosaïque on va mettre plusieurs écoles moi je mets de la dives la classe mosaïque et je mets des images avec différentes ce que j'aimerais bien faire c'est que cette image est cette image là la somme fait 340 donc qui pourrait les placer en dessous donc par défaut au niveau de ma mosaïque je vais lui dire que la mosaïque et une largeur de 350 histoire de correspondre à la taille des images et après je vais lui dire que les différentes images qui se situe dans la mosaïque vont être en flotte let que l'on pourrait être tenté de faire par défaut ça donne un comportement qui ressemble un petit peu à ça qui n'est pas forcément idéal idée donc les flex box va nous permettre de résoudre un problème beaucoup plus simplement donc la première chose que l'on fait c'est quand même un display deux points fixes et je vais retirer la partie flotte perse donc ensuite je vais lui dire que j'ai besoin d'aller à la ligne lorsque les éléments ne rentre pas donc j'aime être un trou de flex braves et je vais le dire vers la ligne et là ça commence à prendre forme par contre je veux que mes éléments ne se stretch pas donc le stretch c'est au niveau du alignés devant l'écran tous deux à l'item ce ap l'ex star pour que les éléments sa ligne par rapport aux classes un peu plus sympa maintenant il ya un petit problème c'est qu'il reste 10 pixels donc là je peux utiliser le justifie contains et lui dire que pour les éléments je veux que tu laisses un espace entre up mais éléments se positionne correctement et maintenant si je veux aussi espacer verticalement il me suffit de mettre en marche une top et amar d'une box de 5 pixels pour que les éléments s'espacent les uns par rapport aux autres et vous voyez j'ai une sorte de petite mosaïque alors attention les flex box ne rendent pas votre design super intelligent c'est à dire qu' il peut pas deviner à cet élément l'âge pourrait placer ici donc je vais essayer de le placer non il essaie de placer les éléments par rapport à la gauche et ensuite il les place comme ça jusqu'à que ça jusqu'à ce que ça bloque d'ailleurs si je retiens la weed fisea hop voilà vous voyez que ça ne crée pas non plus quelque chose d'ultra une autre à pousser mais c'est déjà un petit début si jamais vous avez des images qui ont été bien dimensionné un autre cas d'utilisation c'est dans le cas où toutes les images ont la même largeur donc là je vais donner à mes images une largeur de 150 pour tout le monde est ce que je peux faire c'est donner une impression de lait yop en mosaïque en utilisant une direction de flex un petit peu différente donc là je vais utiliser directement le flex flow histoire de pas avoir à mettre le fait que frapper le flex direction vous prenez partie flex blue je lui dis cette fois ci je veux que tu place les éléments sous forme de colonnes et je veux que tu drap si je fais ça hop tous mes éléments sa ligne comme ça et je vais dire à mon élément je te donne une hauteur par exemple de 500 pixels automatiquement les éléments ne rentrant plus il va les mettre les uns à côté des autres et même là où ça peut être encore plus sympa si vous voulez que les intrus comme plein écran vous pouvez dire je te donne une hauteur qui est 100 % celle du navigateur hélas dès que je redis mentionne voyez que ça donne alors par contre les systèmes ne sont pas forcément bien placé et si maintenant mais je multiplie le nombre d'éléments pour que vraiment on en est plein plein plein plein plein de la page au top why et hop ça se passe correctement alors juste ce que je pourrais faire c'est facile ce serait un petit peu l'inversé m une marge à la fois à droite et à gauche mais voyez que j'ai ce système de petites mosaïques qui se met en place et c'est plutôt sympa voilà donc la après ces incrédules ciation vraiment spécifique mais c'est vrai que beaucoup de gens disent ça remplace maçonnerie par exemple qui est un outil qui permet de créer une mosaïque art ça remplace partiellement suivant le l'ayant tu que voulait imposer après voilà ce n'est pas intelligent au point de se dire qu'on va les y ait un peu de place à jeudi six places et celui là alors alors notre cas d'utilisation c'est typiquement par exemple pour un menu donc là je vais créer une div on va la mettre au dessus tient pop une dit qu'à la classe menu et dans cette vie là je vais mettre un lieu et on va dire que c'est le lien vers l'accueil ensuite j'aurai un lien vers la page contact j'aurai un lien vers les tutoriels et incisif ainsi de suite je vais avoir plein de liens donc cette div qui a la classe menu je vais lui donner une odeur particulière donc ici on va étonner une hauteur de 60 pixels et on veut lui donner une couleur de fond un petit peu grise histoire de délimiter les éléments maintenant est ce qu'on a envie de faire typiquement dans un menu sait mettre les éléments centré par rapport aux verticalement et centre et horizontalement et que tous les éléments prennent à peu près le même espace donc ça pareil c'est un petit peu chiant faire parce que si on ne connaît pas à l'avancé le nombre d'éléments on peut pas mettre une largeur et ils sont pris correctement locales et flex boxe c'est très simple donc on commence d'abord par mettre un display plex ensuite on va préciser que les items doivent être alignées par rapport au centre si je fais un coup de aligne attiré items center up sa place mais idem au centre verticalement ensuite je veux qu'ils soient espacés de manière convenable donc la jemaye justif ali contraint à space robes montres attention par space between les space grande île sorte que tous les éléments soient espacés convenablement et la pop automatiquement je vois que ça fait directement un menu mais il tente trois pietrus j'ai un menu qui est correct au niveau des espacements par contre si je commence à rentrer cir est là au bout d'un moment ils rentrent plus donc ce que je peux lui dire c'est de lui dire d'anvers je veux que tu wrap lorsque les éléments ne peuvent plus rentrer donc là hop si je continue à redimensionner sa va automatiquement la ligne et mes éléments sont stretch et donc du coup ben là je peux mettre un coup de aligner tyreke evans et je veux aligner aux centristes fois que ce soit ou à la coller et mieux espacées et là j'ai mon petit menu donc après je peux même utiliser ça pour créer du responsive je peux lui dire par exemple lorsque tu va atteindre un écran qui a une largeur je vais voir à combien ces mais il ne s'en tiennent peut-être une petite erreur on va dire à partir de 500 pixels donc lorsque la largeur est inférieur à 500 pixels mais dans ce cas là je veux que sur mon menu la flex direction de change et là on va mettre un flex direction à colonnes histoire qui lie en colonne et on va donner à notre élément une hauteur automatique et là mes éléments s'empilent dès que j'ai une hauteur qui est inférieur à 500 voilà et c'est pareil c'est très simple à piloter et de la même façon je peux lire bobet je veux que le menu soit alignée par exemple à droite ou à gauche très simplement en une 10 ans en perd par défaut je veux que les sites m soit non pas en space se rendent mais en flex qui régale et hop ils vont se coller à droite donc évidemment ici sont toutes sont tous collés donc qu'après il suffit de rajouter un petit peu de paddington pouvoir contrebalancer ce petit souci là mes éléments sont alignés à droite et lorsque je redimensionne ouf il se remet place en colonne et ils sont centrés voilà un exemple d'utilisation des plex box d'ailleurs là on va regarder ça et on va être retirée ce média co érige réfléchi oui voilà on va laisser les liens convenablement se placer et on va mettre un space heures maintenant imaginons je veux créer un l'ayant un petit peu plus complexe je veux rider ça on va le remplacer on va l'appliquer d'heure je veux une salle bach et un contenu donc là on est parti je crée mon erreur je crée ensuite une vive qui a la classe sa part et à l'intérieur je marque et je suis une sidebar je suis très inspiré et après on va avoir notre beau dit notre contenu et dans notre contenu on aurait notre petite mosaïque par exemple voilà et en bas on s'imagine peut-être avoir un footeux et tout ça je vais l'englobé d'une div qui va avoir la classe pas je vais faire ça tout simplement pour piloter le flex box directement depuis cette page je suis pas forcément fan de l'idée de m maman bozier en flex boxe voilà pourquoi je lance pour sa dune d'yves au mime et mam mosaïque je vais un petit peu la diminuer parce que là il ya beaucoup beaucoup d'éléments offre alors voit remettre un petit peu moins c'est on va pas forcer la hauteur à 100 dh mais on va mettre 500 spx donc par défaut si je veux que ma sidebar près de 25% donc un quart de l'écran et mon contenu le reste est ce que je serais tenté de faire si j'avais à faire ça au niveau de sang utilisé flex boxe mais c'est que je dirais massaï barre donc à une largeur de 25 % est en faute let et monde contenu donc ici je crois que je l'avais appelé body et mon contenu donc il ya la classe body je lui donnerai une largeur de 73% et je le mettrais en flotte wright l'histoire qui s'aligne à droite je pourrais te mettre en cloque left mais c'est pas bien grave je vais ensuite mettre une couleur de fond sur ma mây barre donc là on va imaginer un petit bleu comme ça et je vais mettre une couleur de fond différentes sur mon body en mettant voilà de l'oranje donc si je fais ça le problème c'est que ce qu'on a souvent comme demande c'est de se dire je veux que la sidebar occupe automatiquement toute la hauteur est vrai que l'élément le plus grand détermine la hauteur des deux éléments et ça c'est un véritable enfer parce qu on est obligé de faire du javascript en général pour détecter ça ou tricheur mais tu as une image de fond sur le contenu qui va se répéter donc les flex boks vont nous permettre de nous simplifier vraiment la vie qui donc ce que je fais c'est que sur ma page je vais mettre que ma page mon élément page et en display plex donc si je fais ça ça va être un petit peu le bordel parce que tout va s'aligner correctement mon leader je vais lui dire qu'il a une largeur de 100 % et pour que le layout ne se force pas je vais préciser que j'accepte le flex wrap à cet endroit automatiquement le leader promène en 100% la sidebar prend 25 % et ensuite le contenu prend 75% et là ô miracle mask barre à la même taille que mon contenu je peux d'ailleurs retiré les flottes à cet automne elle a la même taille à cause du aline items qui a stretch par défaut et du coup mais ces éléments là et ces éléments là sont étendus pour pouvoir rentrer donc si je veux reproduire le bug entre guillemets il faudrait qu ici au niveau de ma partie page je remets un flex tirer 1 non alignés tirer items et je lui dis je veux que tu mettes les items en europe là dans ce cas là j'aurai le même comportement qu avec les flottes un comportement qui n'est pas forcément idéal idéal alors que si je l'ex le flex stretch bien entré en jeu automatiquement et prennent tous les deux la même hauteur et enfin ici je n'ai pas précisé mais je vais préciser le footer voilà et le footer va se placer en dessous je vais lui donner un peu les mêmes propriétés que le leader pour le coup il était un leader ici je vais dire que le footer les prendre à 100% de la largeur et il prendra une hauteur de 73 et il sera pareil en grès et si je veux que le texte soit aligné au centre je peux faire un coup de hal intel center dans ce cas la fraq notre indice réflexe et il faudra que je mette injuste qu'il faille quand tu as center histoire tous les éléments ce centre au niveau de la page voilà donc là vous voyez j'ai créé typiquement un petit l'ayant très simplement en mettant des thunders cette saillie barre et tout ça donc l' avantage c'est que vu que j'utilise les flex boxe mais je peux aussi modifier le sens de mon code html et remodifier ensuite comment sont placés les éléments en utilisant bedu le order donc là par exemple j'ai mis ma sai barre à la fin donc automatiquement et se situe à droite mais si j'ai envie de la mettre devant mais ce que je peux faire c'est dire combien la sidebar à un honneur de m en revanche mon baudimont contenu un honneur de 2 est automatiquement de poche il va placer l'élément en premier et ces éléments-là en dernier alors en revanche attention tous les éléments qui n'ont pas un rôdeur vont aller se placer avant du coup mon footer n'ayant pas de hordes heures il se place au dessus des 2 ça c'est pas quelque chose que je souhaite faire je peux lui dire dans le footer vois tu arrive en troisième position il se replace correctement mais on peut imaginer changer complètement volleyeurs de la page suivant une résolution par exemple par exemple si je veux mettre une seconde sidebar pop donc je mets une seconde sidebar là au niveau de mon dans ma partie css je vais dire que le foot heures et non plus en position de 3000 en position 4 la sidebar ici je voulais redonner une autre classe il sort de la différence il rentre en ôtant sa barre 2d d'arrêt et les sidebar avant peut-être un petit peu trop grande parce que je leur avais donné une largeur de 25 % donc il arrive à ramper de cette barre mais par contre le contenu ne rentre pas et du coup il va à la ligne donc là les seuils de barges vers donner une largeur de 20 % et du coup il me restera 60% pour le body voilà est là mais de saïda sont positionnés l'une à côté de l'autre parce qu'elles ont toutes les deux un ordre de ce que je peux faire c'est dire que la sidebar seconds varient l1 order 2,3 et hop automatiquement elle va aller se placer ici à droite et je peux vraiment piloter les choses que de cette manière là donc avec ce système dordor vous avez vraiment un total un contrôle total sur ce qui se passe par exemple on va refaire un petit coup de médias queen qu'on va legear lorsque la largeur max tirs et 8 elle passe sous les 70 pixels par exemple mais je veux que mon contenu prennent 100% de la largeur donc ici je vais dire que mon contenu c'est le body il a une largeur de 100 % donc il occupera tout l'espace et je veux que mes saiba maintenant occupent chacune 50% de l'espace en mettant à 50% au plat si je fais ça hop et que je commence à retrait cir elles prennent 5 1% par contre je veux plus tôt les places et harnes en bas donc là bas ma sidebar je vais leur mettre à tout les deux ordres de 3,9 mais de sainte-barbe passe l'une à côté de l'autre en dessous voilà et je change comme ça complètement le lay en suivant les tailles d'écran donc moi ici j'utilise le système de largeur traditionnel mais vous pouvez aussi utiliser le système de flex pour mon comportement par défaut lorsque je suis un grand bon je vais dire que ces éléments par défaut en flex basis à 0 qui n'occupe pas d espace mais je veux que ce contenu la occupe deux fois plus d'espacé que les seuils barre donc au niveau de mes sidebar hop je vais mettre un flex à 1 qu'elle occupe inde par défaut et zéro pixel en flex basis par contre mon body je veux qu'ils occupent deux fois plus de l'espace par rapport à l'espace restantes dont qui sera 100% vu que les deux sont en flex basis 2 0 voilà donc maintenant mon élément mais si je respecte mais il a une largeur de 433 contre les side are quoi une largeur de 216 lorsque je reprécise pour qu'on pousse mais là je peux lui dire à mon body up qu'il a un flex basis à 100 % ce qui veut dire que par défaut il a une largeur de 100 % et après va du coup le flex cros ne sert absolument à rien vu qui prend tout large et est mon élément se remet à prendre toute la largeur et les side car elles ont un flex gros à 1 et du coup elle dit bob bell âgée qu'une saillie pardon je la rentrée à 100% si j'aurais applique le order donc là c'est qu'ils allaient sidebar je leur ai appliquant order de 3i l'a25 barre à placer dans le même espace les deux bars en un flex gros à 1 donc elles doivent occuper dans l'espace restant chacune le même pourcentage est vu qu'elles ont tous les deux un flex basis 2 0 ça veut dire que chaque qu'une haie et cupra 50% de l'espace restant si vous voulez vous pouvez imaginer ça de la manière suivante le flex gros il prend tous les éléments qui rentrent sur la même ligne il calcule la somme entre guillemets des flex gros donc là ça fait un plus un ça fait deux il prend l'espace qui reste en donc vu que les deux éléments un flex basis 2 0 ça fait 100 % est comme ça il détermine la soustraction donc pour le coup c'est vrai que c'est une notion qui est un petit peu plus complexes entre guillemets que piloter avec les largeurs donc si vous n'êtes pas du tout à l'aise et vous pouvez laisser les largeurs vu que par défaut le flex bah si c'est un retour c'est les largeurs qui vont être utilisés pour calculer ça mais après ça vous permet aussi d'être beaucoup plus entre guillemets beaucoup plus modulable en utilisant le flex euros là par exemple je peux le dire par défaut je veux que le body le cul quatre fois plus que les autres voilà est ce que je peux faire c'est lui dire que la sidebar par défaut elle elle occupe te est par contre la cei bars second mari elle est un petit peu plus petite et elle va voir pareil un flex gros là j'ai juste besoin de changer le flex europa le texte basis 2 1 voilà donc ça me fait que j'ai une sidebar qui est plus grande que celle là et ça qui prend toujours plus d espace l'avantagé c'est que lorsque je rentrais si si je mets aussi une petite bordure parce qu'ici non pas savoir grand-chose ou à la up mais ça permet à massac bar secondaire de prendre un petit peu moins est ce parce que la sidebar même lorsque l'on en a une réorganisation donc ça que ça va mais d'avoir quelque chose d'un petit peu plus fluide et après c'est vrai que c'est un petit peu moins pilotable entre guillemets que les largeurs donc voilà pour la création dans les iodes compliqué avec les flex boxe enfin dernier cas d'utilisation que l'on avait vu des gens dans une autre vidéo c'est typiquement un centre un alignement au centre par exemple dans ma partie mosaïc je vais mettre qu'une seule image et cette image là je me dis j'aimerais bien qu'elle soit centré par rapport à ce conteneur là peu importe la largeur et la hauteur de mon conteneurs donc là bas c'est très simple vu qu'on a qu'une seule ligne qu'insolite m il suffit de mettre en a limité à 100 heures et injustifiée compte enfin center donc sur ma mosaïque je reviens sur ce que j'avais écrit je mets un display flex jeu mais injuste qu'ils faillent comptait ainsi center ce qui permet automatiquement de places est l'élément au centre il et stretch et par dépôt donc c'est dégueulasse ici je mets un alibi thème center et centre l'item au centre voilà et c'est trois propriétés là un display flex injustice faille comme center et annalynne teamcenter suffisent à centrer un élément et ça peut être un élément de type images comme ça et c'est le cas ici mais ça peut être absolument n'importe quoi si vous avez un formulaire voilà après vous avez un petit bouton dégueulasse envoyait l imagine avoir un label je fais vraiment le strict minimum ici mais tout ce contenu là tout ce formulaire là va être centrée au niveau du centre voilà donc fait attention et pour que le centrage se fasse correctement il faut évidemment que tous les éléments soient entourées d'une d'yves comme ça c'est cet élément là qui va essayer de s'empresser la somme de ces éléments là là en l'occurrence ça peut fonctionner parce que transition de même ligne mais si vous commencez à mettre un petit peu trop de choses vous allez avoir un comportement un petit peu plus bizarres alors que si vous entoure et tout ça d'un formulaire ou d'une digue ou de n'importe quoi mais il va placer vos éléments convenablement dans ses livres parce qu'il va pas prendre en compte le fait que vous ayez un plex dans cet élément là vous êtes dans une structure classique c'est là que les éléments s'empilent lorsqu'il n'y a plus d espace alors que si vous mettez ça comme ça vu qu'on avait pas mis de flex frappe automatiquement il essaie de tout rentrait sur la même ligne et ça donne un résultat un petit peu dégueulasse voilà donc c'est important de savoir aussi comment ça influe sur les éléments lorsque vous avez un display flex quoi qu'il arrive tous les éléments qui sont des enfants directe de cet élément là vont être affectés par les propriétés qu'ils ont été définis au niveau du fleix donc attention ça peut avoir parfois des comportements un petit peu particulier par contre tous les enfants donc tous les éléments qui se situe dans l'autre élément eux on recommence à avoir un comportement classique c'est à dire qu ils s'empilent lorsqu'à plus d'espacé prennent automatiquement à 100% de la largeur du parrain et ainsi de suite et ainsi de suite donc voilà globalement pour ce que je voulais vous montrer sur les flex box donc vous le voyez c'est un outil qui ne ne paye pas de mine mais qui au final le permet de couvrir beaucoup beaucoup de cas qui sont problématiques en css donc il ya certains cas qui peuvent être résolus de manière un petit peu différente je pense notamment à ce système de menus on pourrait arriver à quelque chose de similaire en utilisant l'année était en utilisant des disciplines languedoc mais c'est très rapidement fort avec les dix plaies flex mais sur le parent on va pouvoir piloter comment agissent et comment réagissent les enfants et l' avantage c'est qu'au niveau des brightpoint aussi on peut complètement changer la structure de notre site en disant qu'on va être maintenant je veux que tu arrêtes de mettre les éléments sur une image utile et plaçant cologne et ça nous donne beaucoup beaucoup plus de contrôle sur ce qui se passe l'avantagé aussi c'est que grâce au système d'order par exemple mais on peut avoir un code html qui est une structure particulière et piloter la manière qu'ont les éléments de réagir directement au niveau du ccs et plus se dire par exemple lorsque je fais une liste d'éléments me dira il faut que j'en tour tous adultes yves callac la sro de la même façon lorsque j'ai des éléments et que qui prennent tous 30% souvent toutes les trois éléments mais ils me disent qu'un casque lire trop sommaire dossard résout de problèmes qu'on pouvait déjà résoudre avant avec d'autres nick mais ça permet de les résoudre beaucoup plus simplement donc j'espère que cette vidéo vous aura permis d'y voir un peu plus clair avec ce système de flex box et vous aura donné envie de les utiliser en revanche attention et je le répète si vous voulez supporter les vieux navigateur vous allez devoir mettre des alternatives donc ce que vous pouvez faire c'est par exemple utiliser modern either détecter si votre navigateur supporte ou non un réflexe box et pour les anciens navigateurs utilisés des flottes pour faire un alignement un peu près correct après à vous de voir à quel niveau à quel point vous voulez dégrader les choses après si on verra vraiment le taux d'utilisation c'est vraiment minime donc à vous de voir et à vous de négocier entre guillemets avec le client le support aux noms d'internet explorer 9 est supérieur donc voilà je vous donne rendez vous dans une prochaine vidéo ciao