{"id":6273,"date":"2017-05-09T09:30:59","date_gmt":"2017-05-09T07:30:59","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=6273"},"modified":"2017-05-09T09:40:37","modified_gmt":"2017-05-09T07:40:37","slug":"apprendre-positionnement-flexbox-s-amusant","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/apprendre-positionnement-flexbox-s-amusant","title":{"rendered":"Apprendre le positionnement en s’amusant \u2013 Partie 1 : Flexbox"},"content":{"rendered":"

J’ai commenc\u00e9 \u00e0 apprendre le CSS en jouant avec des flottants et tentant de positionner des \u00e9l\u00e9ments en absolute et relative tout en esp\u00e9rant arriver \u00e0 peu pr\u00e8s au r\u00e9sultat escompt\u00e9 dans le navigateur. Pour mettre en page nos sites web nous avons aujourd’hui la chance d’avoir de nouveaux outils \u00e0 notre disposition : Flexbox<\/a> et Grid Layout<\/a>.<\/p>\n

<\/p>\n

Si vous n’avez pas besoin de supporter IE9 et inf\u00e9rieur, Flexbox est support\u00e9 presque partout<\/a>\u00a0et est utilis\u00e9 pour cr\u00e9er des mises en page fluides et flexibles. Grid Layout quant \u00e0 lui manque encore cruellement de support sur mobile notamment<\/a>\u00a0mais va devenir tr\u00e8s int\u00e9ressant pour construire des grilles complexes et responsives.<\/p>\n

Les deux modules CSS peuvent sembler un peu effrayants et compliqu\u00e9s \u00e0 maitriser. Il existe cependant pas mal d’outils tr\u00e8s funs et sympas sur le net pour vous aider \u00e0 les dompter (un peu comme le kiwi en bas de ce blog :D) et \u00eatre pr\u00eats \u00e0 les utiliser lorsque le support le permettra partout.<\/p>\n

Cet article est une traduction de\u00a0Fun places to learn CSS Layout \u2013 \u00a0Part 1: Flexbox<\/a>. Il\u00a0est le premier d’une s\u00e9rie sur les possibilit\u00e9s de mise en page CSS. Aujourd’hui, on commence par les ressources pour apprendre et maitriser flexbox<\/strong>.<\/p>\n

Des petits jeux pour apprendre\u00a0Flexbox<\/h2>\n

Flexbox Froggy Game<\/a><\/h3>\n

Flexbox Froggy<\/em><\/strong> est un petit jeu tr\u00e8s fun o\u00f9 il vous faudra utiliser diff\u00e9rentes propri\u00e9t\u00e9s Flexbox pour placer les petites grenouilles sur leurs n\u00e9nuphars respectifs. (par\u00a0Thomas H. Park<\/a>)<\/p>\n

\"Flexbox<\/a><\/p>\n

Flexbox defense Game<\/a><\/h3>\n

Flexbox defense<\/em><\/strong> est un jeu o\u00f9 vous devrez utiliser les propri\u00e9t\u00e9s Flexbox pour placer des tourelles de sorte \u00e0 emp\u00eacher les vagues d’ennemies d’approcher.\u00a0(par\u00a0Channing Allen<\/a>)<\/p>\n

\"Flexbox<\/a><\/p>\n

Editeurs Visuels Flexbox<\/h2>\n

Parfois le meilleur moyen de d\u00e9couvrir une propri\u00e9t\u00e9 CSS reste encore de jouer avec. Voici quelques sites o\u00f9 vous\u00a0pourrez \u00e9clater avec les fonctionnalit\u00e9s et tout casser.<\/p>\n

Visual Guide to CSS3 Flexbox<\/a><\/h3>\n

Ajoutez, supprimez et positionnez les enfants comme vous le souhaitez pour construire une mise en page flexible. (par Dimitar Stojanov<\/a>)<\/p>\n

\"Flexbox<\/a><\/p>\n

Flexbox playground<\/a><\/h3>\n

Sur ce petit CodePen bac \u00e0 sable de\u00a0Gabi<\/a>\u00a0vous pourrez tester les diff\u00e9rentes valeurs des propri\u00e9t\u00e9s et voir les r\u00e9sultats.<\/p>\n

\"Flexbox<\/a><\/p>\n

Flexplorer<\/a><\/h3>\n

Un autre bac \u00e0 sable cr\u00e9\u00e9 par\u00a0Bennett Feely<\/a>\u00a0pour tester les diff\u00e9rentes propri\u00e9t\u00e9s et explorer les possibilit\u00e9s de ce module CSS.<\/p>\n

\"Flexplorer\"<\/a><\/p>\n

Ce que\u00a0Flexbox\u00a0vous aidera \u00e0 construire<\/h2>\n

Solved by Flexbox<\/a><\/h3>\n

Avant Flexbox, centrer verticalement \u00e9tait jusque l\u00e0 le Graal, la licorne rose \u00e0 paillette, LE truc inaccessible (bon ok : LE truc BIEN relou faisable \u00e0 gros coups de hacks). Ce site vous propose des astuces de mises en page possible et grandement facilit\u00e9es gr\u00e2ce \u00e0 Flexbox. (par\u00a0Phil Walton<\/a>)<\/p>\n

\"Solved<\/a><\/p>\n

Flexbox Patterns<\/a><\/h3>\n

C’est bien sympa de faire des mises en page, mais qu’en est-il de composants plus complexes comme des onglets ou des cartes ? C’est ce que vous propose de construire Flexbox Patterns<\/strong><\/em>\u00a0(par\u00a0CJ Cenizal<\/a>)<\/p>\n

\"Solved<\/a><\/p>\n

Les \u00ab\u00a0anti-s\u00e8ches\u00a0\u00bb Flexbox<\/h2>\n

La syntaxe de Flexbox n’est pas des plus faciles \u00e0 appr\u00e9hender, je vous propose donc quelques anti-s\u00e8ches (cheatsheets<\/em> pour les anglophones) pour vous aider \u00e0 vous souvenir des propri\u00e9t\u00e9s et valeurs.<\/p>\n

CSS tricks Guide to Flexbox<\/em> sur CSS tricks<\/em><\/a><\/h3>\n

\"CSS<\/a><\/p>\n

Le\u00a0flexbox Cheatsheet<\/em> fruit\u00e9 de Joni Bologna <\/a><\/h3>\n

\"Joni<\/a><\/p>\n

Flexbox Cheatsheet<\/em> par Yoksel<\/a><\/h3>\n

\"Flexbox<\/a><\/p>\n

Vous en voulez encore plus ?<\/h2>\n

Wes Boss a fait 20 vid\u00e9os gratuites<\/a>\u00a0pour vous aider \u00e0 apprendre Flexbox et vous pouvez\u00a0\u00e9galement jeter un petit coup d’\u0153il ici si vous voulez de jolis Gifs anim\u00e9s pour comprendre Flexbox<\/a>.<\/p>\n

Voil\u00e0, c’est tout pour\u00a0Flexbox, la prochaine partie de la s\u00e9rie sera consacr\u00e9e \u00e0 Grid Layout \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

J’ai commenc\u00e9 \u00e0 apprendre le CSS en jouant avec des flottants et tentant de positionner des \u00e9l\u00e9ments en absolute et relative tout en esp\u00e9rant arriver \u00e0 peu pr\u00e8s au r\u00e9sultat escompt\u00e9 dans le navigateur. Pour mettre en page nos sites web nous avons aujourd’hui la chance d’avoir de nouveaux outils \u00e0 notre disposition : Flexbox […]<\/p>\n","protected":false},"author":588,"featured_media":6309,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[17,50],"tags":[428,604,179],"coauthors":[756],"class_list":["post-6273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-ressources-telechargements","tag-css3","tag-flexbox","tag-mise-en-page"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/588"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=6273"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6273\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/6309"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=6273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6273"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}