Depuis lors, \u00ab flex \u00bb a subi quelques modifications pour atteindre son it\u00e9ration actuelle. La valeur flexible est une alternative aux \u00e9l\u00e9ments de blocs flott\u00e9s et manipul\u00e9s \u00e0 l’aide de media queries.<\/p>\n
Au lieu de cela, les d\u00e9veloppeurs peuvent cr\u00e9er un conteneur flexible, une flexbox pour faire simple. Un v\u00e9ritable must pour les \u00e9crans mobiles<\/a> et le contenu r\u00e9actif des mises en page dynamiques et des webapps.<\/p>\n La disposition de la bo\u00eete flexible est une fa\u00e7on d’utiliser la propri\u00e9t\u00e9 d’affichage CSS <\/a>d’une toute nouvelle mani\u00e8re. Les \u00e9l\u00e9ments de blocs s\u2019empilent verticalement tandis que les \u00e9l\u00e9ments en ligne s’\u00e9coulent horizontalement (jusqu’\u00e0 ce qu’ils se heurtent \u00e0 une nouvelle ligne).<\/p>\n Les \u00e9l\u00e9ments flexbox peuvent \u00eatre empil\u00e9s verticalement ou horizontalement en fonction de la configuration voulue. Ils peuvent \u00eatre espac\u00e9s uniform\u00e9ment sur la page ou serr\u00e9s les uns contre les autres. Cela permet plus de contr\u00f4le aux d\u00e9veloppeurs qui souhaitent cr\u00e9er des mises en page naturellement r\u00e9actives.<\/p>\n Tout \u00e9l\u00e9ment r\u00e9f\u00e9renc\u00e9 sous forme de flexbox est un \u00e9l\u00e9ment de conteneur. Ce conteneur contient des \u00e9l\u00e9ments internes connus sous le nom d’\u00e9l\u00e9ments flexbox.<\/p>\n L’affichage \u00ab display : flex \u00bb du conteneur peut avoir une largeur fixe ou fluide, mais il est logique de la laisser fluide, de sorte que le contenu s’adapte \u00e0 la page. Les \u00e9l\u00e9ments internes ne re\u00e7oivent pas de valeurs de largeur sp\u00e9cifiques, mais sont plut\u00f4t affich\u00e9s en fonction des proportions.<\/p>\n En bref, vous utilisez une propri\u00e9t\u00e9 CSS nomm\u00e9e \u00ab flex \u00bb pour d\u00e9finir un ratio entre les cases (principalement des \u00e9l\u00e9ments \u00ab HTML div \u00bb). \u00ab flex : 1 \u00bb repr\u00e9sente un rapport 1 : 1 o\u00f9 chaque \u00e9l\u00e9ment Flex interne affiche \u00e0 la m\u00eame largeur ind\u00e9pendamment de la r\u00e9solution de l’\u00e9cran.<\/p>\n Naturellement, la premi\u00e8re partie d’une flexbox est le conteneur lui-m\u00eame. Ce conteneur est affich\u00e9 \u00ab display : flex \u00bb pour que ses enfants se comportent de la mani\u00e8re pr\u00e9vue.<\/p>\n Les \u00e9l\u00e9ments \u00e0 l’int\u00e9rieur de la flexbox peuvent circuler verticalement ou horizontalement en utilisant la propri\u00e9t\u00e9 direction-flex. Cela prend \u00e9galement une valeur de ligne ou de colonne avec des options invers\u00e9es. Notez que cette propri\u00e9t\u00e9 est appliqu\u00e9e au parent, et non aux descendants.<\/p>\n Une autre propri\u00e9t\u00e9 importante est un \u00ab contenu justifi\u00e9 \u00bb qui s’applique \u00e9galement directement au parent. Cela d\u00e9finit comment l’espace se comporte lorsque les \u00e9l\u00e9ments internes ne remplissent pas le conteneur. Les \u00e9l\u00e9ments Flexbox peuvent \u00eatre centr\u00e9s, align\u00e9s vers la gauche \/ droite, ou espac\u00e9s uniform\u00e9ment selon les cas.<\/p>\n Source : https:\/\/envato.com<\/p><\/div>\n Ces deux propri\u00e9t\u00e9s sont essentielles lors de la personnalisation d’un conteneur souple. Mais vous devez \u00e9galement configurer les propri\u00e9t\u00e9s pour d\u00e9finir comment les \u00e9l\u00e9ments internes doivent se comporter.<\/p>\n Flexbox utilise la propri\u00e9t\u00e9 \u00ab flex \u00bb qui est un raccourci pour quelques r\u00e9glages diff\u00e9rents. CSS flex peut prendre trois options qui d\u00e9finissent individuellement \u00ab flex-grow \u00bb, \u00ab flex-shrink \u00bb et \u00ab flex-basis \u00bb.<\/p>\n Les deux premi\u00e8res propri\u00e9t\u00e9s d\u00e9finissent les rapports de croissance et de r\u00e9tr\u00e9cissement pour les \u00e9l\u00e9ments internes.<\/p>\n Les valeurs sont sans unit\u00e9, donc \u00ab flex : 1 \u00bb comme syntaxe valide. La valeur de 1 d\u00e9finirait chaque case \u00e0 une valeur flexible de 1 bas\u00e9 sur toutes les autres cases.<\/p>\n Au d\u00e9but, cette propri\u00e9t\u00e9 peut sembler confuse, mais avec des exemples pratiques et en direct, vous allez comprendre comment tout fonctionne. La caract\u00e9ristique abr\u00e9g\u00e9e de \u00ab flex \u00bb repr\u00e9sente la fa\u00e7on dont vous structurez les tailles et les comportements des bo\u00eetes de contenu interne.<\/p>\n La seule partie de flex qui prend une unit\u00e9 est \u00ab flex-basis \u00bb. Ce param\u00e8tre optionnel d\u00e9finit la taille par d\u00e9faut de la zone interne (largeur si ligne, hauteur si colonne). Par d\u00e9faut, il est d\u00e9fini sur 0, mais vous pouvez choisir n’importe quoi, avec n’importe quelle unit\u00e9 de pixels.<\/p>\n Le mod\u00e8le Flexbox a subi une s\u00e9rie de modifications avec des r\u00e9visions et des simplifications des normes de code. Soyez conscient que certains tutoriels et des d\u00e9monstrations en direct peuvent utiliser une syntaxe obsol\u00e8te et n\u00e9cessitent des mises \u00e0 jour avant leur utilisation sur un autre projet.<\/p>\n Si vous voulez un exemple plus diversifi\u00e9, consultez cette disposition flexible sur CSSDeck<\/a>.<\/p>\n La bo\u00eete de contenu principale est flexible tandis que d’autres colonnes sont fix\u00e9es. Les \u00e9l\u00e9ments redimensionnables restent fluides jusqu’\u00e0 ce que la colonne de la barre lat\u00e9rale finisse par d\u00e9composer.<\/p>\n Source : CSSDeck<\/p><\/div>\n Tout ce qui se trouve dans cette mise en page d’exemple est construit \u00e0 l’aide de Flexbox. Il n’y a pas de flotteurs, il n’y a pas de media queries. Cet extrait de grille carr\u00e9 illustre le m\u00eame point que les mises en page flexbox r\u00e9actives ne n\u00e9cessitent pas de media queries.<\/p>\n Autre utilisation et certainement l\u2019une des plus cool pour Flexbox est le centrage vertical et horizontal. Les concepteurs Web <\/a>ont toujours utilis\u00e9 la marge : 0 auto \u00ab margin : 0 auto \u00bb pour le centrage horizontal avec une largeur fixe. Mais Flexbox permet un centrage vertical et horizontal sur un conteneur \u00e0 largeur fluide.<\/p>\n Et ce ne sont que quelques exemples de ce qui est possible avec Flexbox. Vous voudrez dor\u00e9navant concevoir des mises en page Flexbox pour chacun de vos nouveaux projets, mais il est pr\u00e9f\u00e9rable de savoir quels navigateurs supportent pleinement cette technique.<\/p>\n Les sp\u00e9cifications flexbox modernes ont \u00e9t\u00e9 mises \u00e0 jour plusieurs fois depuis la version originale en 2009. Les sp\u00e9cifications actuelles datant de 2015 ont \u00e9t\u00e9 adopt\u00e9es par tous les navigateurs modernes, y compris Internet Explorer.<\/p>\n Mais le probl\u00e8me de l’utilisation commune r\u00e9side dans une compatibilit\u00e9 ascendante. IE10 supporte peu Flexbox. Internet Explorerv10 prend en charge le pr\u00e9fixe -ms alors que IE9 non. Vous pouvez recourir \u00e0 Flexie.js<\/a>, mais les polyfills prennent un certain temps pour le rendu.<\/p>\n Les d\u00e9veloppeurs doivent \u00e9galement tenir compte du pr\u00e9fixe du navigateur. Alors qu\u2019IE10 est une nuisance, il existe d’autres pr\u00e9fixes requis pour plusieurs propri\u00e9t\u00e9s Flexbox.<\/p>\n Se pose alors la question : est-ce que Flexbox est pr\u00eat pour une utilisation courante dans les projets Web ? R\u00e9ponse : cela d\u00e9pend.<\/p>\n Les sites Web HTML5 peuvent certainement b\u00e9n\u00e9ficier du mod\u00e8le Flexbox. Toutefois, si la plupart des d\u00e9veloppeurs utilisent des navigateurs \u00e0 jour qui supportent facilement le mod\u00e8le Flexbox, il peut \u00eatre pr\u00e9f\u00e9rable pour un simple site Web d’entreprise de compter sur des flotteurs (\u00ab floats \u00bb) et des requ\u00eates multim\u00e9dias (\u00ab media queries \u00bb). Cette consid\u00e9ration r\u00e9side dans le support du navigateur, et donc les statistiques li\u00e9s aux visiteurs surfant sur ces navigateurs pour n\u2019importe quel site Web donn\u00e9.<\/p>\n Voyez ce que vous pouvez construire et essayer de nouvelles id\u00e9es pour savoir comment fonctionne Flexbox et o\u00f9 cela pourrait \u00eatre utile. Pour vous faier la main, la plateforme de jeu \u00e9ducatif\u00a0 Flexbox Froggy<\/a> est id\u00e9ale.<\/p>\n Source : http:\/\/flexboxfroggy.com\/<\/p><\/div>\n Ce post vous a donn\u00e9 envie d\u2019en savoir plus sur ce mode de mise en page, et sur les probl\u00e9matiques de conception ergonomique et de gestion des contraintes li\u00e9es au Responsive Web Design ? Renseignez-vous sans plus attendre sur la formation Responsive web design VISIPLUS academy<\/a>.<\/p>\n Vous souhaitez en savoir plus sur le Flexbox CSS3 pour le Responsive Design ? Cet article couvre les fondamentaux de l’utilisation de Flexbox CSS et propose des ressources utiles pour approfondir le sujet. La plupart…<\/p>\n","protected":false},"author":5,"featured_media":11972,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[315,149],"tags":[792,777,142,185],"class_list":["post-11971","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-responsive-web-design-mobile-1","category-mobile-web","tag-css","tag-css3","tag-responsive-design","tag-responsive-web-design"],"_links":{"self":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts\/11971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/comments?post=11971"}],"version-history":[{"count":5,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts\/11971\/revisions"}],"predecessor-version":[{"id":17166,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/posts\/11971\/revisions\/17166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/media\/11972"}],"wp:attachment":[{"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/media?parent=11971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/categories?post=11971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/academy.visiplus.com\/blog\/wp-json\/wp\/v2\/tags?post=11971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Qu’est-ce qu\u2019une bo\u00eete flexible ?<\/h2>\n
Les cl\u00e9s d’une mise en page Flexbox<\/h2>\n
![\"Source](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/07\/02-flex-justify-content-design-style.jpg\")
<\/a>Exemples Flexbox dans CSS<\/h2>\n
![\"Source](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/07\/CSS3-Flexbox-Flexible-Box-Layouts-Flex-Website-CSSDeck-Mozilla-Firefox.jpg\")
<\/a>Utilisation et support communs<\/h2>\n
![\"Source](\"https:\/\/academy.visiplus.com\/blog\/wp-content\/uploads\/2017\/07\/Flexbox-Froggy-A-game-for-learning-CSS-flexbox-Mozilla-Firefox.jpg\")
<\/a>Source :\u00a0https:\/\/opensource.com\/business\/16\/11\/open-source-dashboard-tools-visualizing-data<\/h6>\n","protected":false},"excerpt":{"rendered":"