[{"data":1,"prerenderedAt":1012},["ShallowReactive",2],{"page-\u002Fcss\u002Fflexbox":3,"pieces-css":969,"autour-\u002Fcss\u002Fflexbox":994,"prerequis-\u002Fcss\u002Fflexbox":999,"plan-css":1001},{"id":4,"title":5,"body":6,"description":941,"extension":942,"ligne":142,"meta":943,"motsCles":944,"navigation":832,"niveau":948,"path":949,"prerequis":950,"ressources":952,"seo":964,"sources":965,"stem":967,"__hash__":968},"docs\u002Fcss\u002F04.flexbox.md","Flexbox",{"type":7,"value":8,"toc":930},"minimark",[9,14,39,43,47,135,138,188,204,210,214,217,232,239,299,311,315,353,356,417,421,457,472,482,486,493,542,545,549,554,591,594,619,628,639,643,769,871,880,886,890,926],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,26,36],"ul",{},[18,19,20,21,25],"li",{},"Mettre des éléments côte à côte avec ",[22,23,24],"code",{},"display: flex",".",[18,27,28,29,32,33,25],{},"Les répartir et les aligner avec ",[22,30,31],{},"justify-content"," et ",[22,34,35],{},"align-items",[18,37,38],{},"Laisser les éléments grandir, rétrécir et passer à la ligne.",[10,40,42],{"id":41},"éléments-côte-à-côte","Éléments côte à côte",[44,45,46],"p",{},"Par défaut, une liste de cartes de recettes s'empile verticalement. Voici le HTML :",[48,49,54],"pre",{"className":50,"code":51,"language":52,"meta":53,"style":53},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cul class=\"recettes\">\n  \u003Cli>Tarte aux pommes\u003C\u002Fli>\n  \u003Cli>Soupe de potiron\u003C\u002Fli>\n  \u003Cli>Crêpes\u003C\u002Fli>\n\u003C\u002Ful>\n","html","",[22,55,56,82,97,111,125],{"__ignoreMap":53},[57,58,61,65,68,72,75,79],"span",{"class":59,"line":60},"line",1,[57,62,64],{"class":63},"scfrF","\u003C",[57,66,15],{"class":67},"s5JFL",[57,69,71],{"class":70},"s5iOY"," class",[57,73,74],{"class":63},"=",[57,76,78],{"class":77},"shWOn","\"recettes\"",[57,80,81],{"class":63},">\n",[57,83,85,88,90,93,95],{"class":59,"line":84},2,[57,86,87],{"class":63},"  \u003C",[57,89,18],{"class":67},[57,91,92],{"class":63},">Tarte aux pommes\u003C\u002F",[57,94,18],{"class":67},[57,96,81],{"class":63},[57,98,100,102,104,107,109],{"class":59,"line":99},3,[57,101,87],{"class":63},[57,103,18],{"class":67},[57,105,106],{"class":63},">Soupe de potiron\u003C\u002F",[57,108,18],{"class":67},[57,110,81],{"class":63},[57,112,114,116,118,121,123],{"class":59,"line":113},4,[57,115,87],{"class":63},[57,117,18],{"class":67},[57,119,120],{"class":63},">Crêpes\u003C\u002F",[57,122,18],{"class":67},[57,124,81],{"class":63},[57,126,128,131,133],{"class":59,"line":127},5,[57,129,130],{"class":63},"\u003C\u002F",[57,132,15],{"class":67},[57,134,81],{"class":63},[44,136,137],{},"Une seule déclaration les place en rangée :",[48,139,143],{"className":140,"code":141,"language":142,"meta":53,"style":53},"language-css shiki shiki-themes github-light-default github-dark-default github-dark-default",".recettes {\n  display: flex;\n  gap: 1rem;\n}\n","css",[22,144,145,153,167,183],{"__ignoreMap":53},[57,146,147,150],{"class":59,"line":60},[57,148,149],{"class":70},".recettes",[57,151,152],{"class":63}," {\n",[57,154,155,158,161,164],{"class":59,"line":84},[57,156,157],{"class":70},"  display",[57,159,160],{"class":63},": ",[57,162,163],{"class":70},"flex",[57,165,166],{"class":63},";\n",[57,168,169,172,174,177,181],{"class":59,"line":99},[57,170,171],{"class":70},"  gap",[57,173,160],{"class":63},[57,175,176],{"class":70},"1",[57,178,180],{"class":179},"sOnC1","rem",[57,182,166],{"class":63},[57,184,185],{"class":59,"line":113},[57,186,187],{"class":63},"}\n",[44,189,190,193,194,196,197,200,201,25],{},[191,192,5],"strong",{}," est un mode de disposition pensé pour répartir des éléments dans une seule direction, ligne ou colonne. L'élément avec ",[22,195,24],{}," est le ",[191,198,199],{},"conteneur flex",". Ses enfants directs deviennent des ",[191,202,203],{},"éléments flex",[44,205,206,209],{},[22,207,208],{},"gap"," ajoute un espace fixe entre les éléments. C'est plus propre que des marges.",[10,211,213],{"id":212},"les-deux-axes","Les deux axes",[44,215,216],{},"Un conteneur flex a deux axes :",[15,218,219,226],{},[18,220,221,222,225],{},"l'",[191,223,224],{},"axe principal",", celui dans lequel les éléments se suivent (horizontal par défaut) ;",[18,227,221,228,231],{},[191,229,230],{},"axe secondaire",", perpendiculaire.",[44,233,234,235,238],{},"La propriété ",[22,236,237],{},"flex-direction"," choisit l'axe principal :",[240,241,242,255],"table",{},[243,244,245],"thead",{},[246,247,248,252],"tr",{},[249,250,251],"th",{},"Valeur",[249,253,254],{},"Effet",[256,257,258,269,279,289],"tbody",{},[246,259,260,266],{},[261,262,263],"td",{},[22,264,265],{},"row",[261,267,268],{},"en ligne, de gauche à droite (défaut)",[246,270,271,276],{},[261,272,273],{},[22,274,275],{},"row-reverse",[261,277,278],{},"en ligne, de droite à gauche",[246,280,281,286],{},[261,282,283],{},[22,284,285],{},"column",[261,287,288],{},"en colonne, de haut en bas",[246,290,291,296],{},[261,292,293],{},[22,294,295],{},"column-reverse",[261,297,298],{},"en colonne, de bas en haut",[44,300,301,302,304,305,307,308,310],{},"Retiens bien ces deux axes : ",[22,303,31],{}," agit sur l'axe principal, ",[22,306,35],{}," sur l'axe secondaire. Quand tu passes en ",[22,309,285],{},", les deux s'inversent.",[10,312,314],{"id":313},"répartir-sur-laxe-principal","Répartir sur l'axe principal",[48,316,318],{"className":140,"code":317,"language":142,"meta":53,"style":53},".entete {\n  display: flex;\n  justify-content: space-between;\n}\n",[22,319,320,327,337,349],{"__ignoreMap":53},[57,321,322,325],{"class":59,"line":60},[57,323,324],{"class":70},".entete",[57,326,152],{"class":63},[57,328,329,331,333,335],{"class":59,"line":84},[57,330,157],{"class":70},[57,332,160],{"class":63},[57,334,163],{"class":70},[57,336,166],{"class":63},[57,338,339,342,344,347],{"class":59,"line":99},[57,340,341],{"class":70},"  justify-content",[57,343,160],{"class":63},[57,345,346],{"class":70},"space-between",[57,348,166],{"class":63},[57,350,351],{"class":59,"line":113},[57,352,187],{"class":63},[44,354,355],{},"Avec ce réglage, le premier élément va au début, le dernier à la fin, et l'espace libre se répartit entre eux. Idéal pour un logo à gauche et un menu à droite.",[240,357,358,366],{},[243,359,360],{},[246,361,362,364],{},[249,363,251],{},[249,365,254],{},[256,367,368,378,388,398,407],{},[246,369,370,375],{},[261,371,372],{},[22,373,374],{},"flex-start",[261,376,377],{},"tout au début (défaut)",[246,379,380,385],{},[261,381,382],{},[22,383,384],{},"center",[261,386,387],{},"au centre",[246,389,390,395],{},[261,391,392],{},[22,393,394],{},"flex-end",[261,396,397],{},"à la fin",[246,399,400,404],{},[261,401,402],{},[22,403,346],{},[261,405,406],{},"espace entre les éléments, rien aux bords",[246,408,409,414],{},[261,410,411],{},[22,412,413],{},"space-around",[261,415,416],{},"espace autour de chaque élément",[10,418,420],{"id":419},"aligner-sur-laxe-secondaire","Aligner sur l'axe secondaire",[48,422,424],{"className":140,"code":423,"language":142,"meta":53,"style":53},".entete {\n  display: flex;\n  align-items: center;\n}\n",[22,425,426,432,442,453],{"__ignoreMap":53},[57,427,428,430],{"class":59,"line":60},[57,429,324],{"class":70},[57,431,152],{"class":63},[57,433,434,436,438,440],{"class":59,"line":84},[57,435,157],{"class":70},[57,437,160],{"class":63},[57,439,163],{"class":70},[57,441,166],{"class":63},[57,443,444,447,449,451],{"class":59,"line":99},[57,445,446],{"class":70},"  align-items",[57,448,160],{"class":63},[57,450,384],{"class":70},[57,452,166],{"class":63},[57,454,455],{"class":59,"line":113},[57,456,187],{"class":63},[44,458,459,462,463,465,466,32,468,471],{},[22,460,461],{},"align-items: center"," centre les éléments verticalement dans la hauteur du conteneur. Les autres valeurs courantes sont ",[22,464,374],{},", ",[22,467,394],{},[22,469,470],{},"stretch"," (le défaut : les éléments s'étirent pour remplir la hauteur).",[473,474,475],"tip",{},[44,476,477,478,481],{},"Pour centrer un bloc au milieu de son parent, dans les deux directions, utilise ",[22,479,480],{},"display: flex; justify-content: center; align-items: center;",". Le parent doit avoir une hauteur.",[10,483,485],{"id":484},"passer-à-la-ligne","Passer à la ligne",[44,487,488,489,492],{},"Par défaut, les éléments restent sur une seule ligne, quitte à se serrer. ",[22,490,491],{},"flex-wrap: wrap"," autorise le retour à la ligne :",[48,494,496],{"className":140,"code":495,"language":142,"meta":53,"style":53},".recettes {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n}\n",[22,497,498,504,514,526,538],{"__ignoreMap":53},[57,499,500,502],{"class":59,"line":60},[57,501,149],{"class":70},[57,503,152],{"class":63},[57,505,506,508,510,512],{"class":59,"line":84},[57,507,157],{"class":70},[57,509,160],{"class":63},[57,511,163],{"class":70},[57,513,166],{"class":63},[57,515,516,519,521,524],{"class":59,"line":99},[57,517,518],{"class":70},"  flex-wrap",[57,520,160],{"class":63},[57,522,523],{"class":70},"wrap",[57,525,166],{"class":63},[57,527,528,530,532,534,536],{"class":59,"line":113},[57,529,171],{"class":70},[57,531,160],{"class":63},[57,533,176],{"class":70},[57,535,180],{"class":179},[57,537,166],{"class":63},[57,539,540],{"class":59,"line":127},[57,541,187],{"class":63},[44,543,544],{},"Tu obtiens une grille souple : quand la place manque, les cartes descendent à la ligne suivante.",[10,546,548],{"id":547},"faire-grandir-les-éléments","Faire grandir les éléments",[44,550,234,551,553],{},[22,552,163],{}," règle la façon dont chaque élément partage l'espace. Voici sa forme la plus utile :",[48,555,557],{"className":140,"code":556,"language":142,"meta":53,"style":53},".recettes li {\n  flex: 1 1 12rem;\n}\n",[22,558,559,568,587],{"__ignoreMap":53},[57,560,561,563,566],{"class":59,"line":60},[57,562,149],{"class":70},[57,564,565],{"class":67}," li",[57,567,152],{"class":63},[57,569,570,573,575,577,580,583,585],{"class":59,"line":84},[57,571,572],{"class":70},"  flex",[57,574,160],{"class":63},[57,576,176],{"class":70},[57,578,579],{"class":70}," 1",[57,581,582],{"class":70}," 12",[57,584,180],{"class":179},[57,586,166],{"class":63},[57,588,589],{"class":59,"line":99},[57,590,187],{"class":63},[44,592,593],{},"Les trois valeurs se lisent ainsi :",[595,596,597,603,609],"ol",{},[18,598,599,602],{},[22,600,601],{},"flex-grow"," (1) : l'élément peut grandir pour occuper l'espace libre ;",[18,604,605,608],{},[22,606,607],{},"flex-shrink"," (1) : il peut rétrécir si la place manque ;",[18,610,611,614,615,618],{},[22,612,613],{},"flex-basis"," (",[22,616,617],{},"12rem",") : sa taille de départ avant répartition.",[44,620,621,622,32,625,627],{},"Avec ",[22,623,624],{},"flex: 1 1 12rem",[22,626,491],{},", chaque carte fait au moins environ 12rem et les cartes d'une ligne se partagent la largeur à parts égales.",[44,629,630,631,634,635,638],{},"Pour un élément en particulier, ",[22,632,633],{},"align-self"," remplace l'alignement du conteneur. ",[22,636,637],{},"order"," change sa position sans toucher au HTML.",[10,640,642],{"id":641},"un-exemple-complet-un-en-tête","Un exemple complet : un en-tête",[48,644,646],{"className":50,"code":645,"language":52,"meta":53,"style":53},"\u003Cheader class=\"entete\">\n  \u003Ca href=\"\u002F\" class=\"logo\">Recettes\u003C\u002Fa>\n  \u003Cnav class=\"menu\">\n    \u003Ca href=\"\u002Frecettes\">Toutes\u003C\u002Fa>\n    \u003Ca href=\"\u002Fcontact\">Contact\u003C\u002Fa>\n  \u003C\u002Fnav>\n\u003C\u002Fheader>\n",[22,647,648,664,693,709,730,750,760],{"__ignoreMap":53},[57,649,650,652,655,657,659,662],{"class":59,"line":60},[57,651,64],{"class":63},[57,653,654],{"class":67},"header",[57,656,71],{"class":70},[57,658,74],{"class":63},[57,660,661],{"class":77},"\"entete\"",[57,663,81],{"class":63},[57,665,666,668,671,674,676,679,681,683,686,689,691],{"class":59,"line":84},[57,667,87],{"class":63},[57,669,670],{"class":67},"a",[57,672,673],{"class":70}," href",[57,675,74],{"class":63},[57,677,678],{"class":77},"\"\u002F\"",[57,680,71],{"class":70},[57,682,74],{"class":63},[57,684,685],{"class":77},"\"logo\"",[57,687,688],{"class":63},">Recettes\u003C\u002F",[57,690,670],{"class":67},[57,692,81],{"class":63},[57,694,695,697,700,702,704,707],{"class":59,"line":99},[57,696,87],{"class":63},[57,698,699],{"class":67},"nav",[57,701,71],{"class":70},[57,703,74],{"class":63},[57,705,706],{"class":77},"\"menu\"",[57,708,81],{"class":63},[57,710,711,714,716,718,720,723,726,728],{"class":59,"line":113},[57,712,713],{"class":63},"    \u003C",[57,715,670],{"class":67},[57,717,673],{"class":70},[57,719,74],{"class":63},[57,721,722],{"class":77},"\"\u002Frecettes\"",[57,724,725],{"class":63},">Toutes\u003C\u002F",[57,727,670],{"class":67},[57,729,81],{"class":63},[57,731,732,734,736,738,740,743,746,748],{"class":59,"line":127},[57,733,713],{"class":63},[57,735,670],{"class":67},[57,737,673],{"class":70},[57,739,74],{"class":63},[57,741,742],{"class":77},"\"\u002Fcontact\"",[57,744,745],{"class":63},">Contact\u003C\u002F",[57,747,670],{"class":67},[57,749,81],{"class":63},[57,751,753,756,758],{"class":59,"line":752},6,[57,754,755],{"class":63},"  \u003C\u002F",[57,757,699],{"class":67},[57,759,81],{"class":63},[57,761,763,765,767],{"class":59,"line":762},7,[57,764,130],{"class":63},[57,766,654],{"class":67},[57,768,81],{"class":63},[48,770,773],{"className":140,"code":771,"filename":772,"language":142,"meta":53,"style":53},".entete {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem;\n}\n\n.menu {\n  display: flex;\n  gap: 1rem;\n}\n","style.css",[22,774,775,781,791,801,811,824,828,834,842,853,866],{"__ignoreMap":53},[57,776,777,779],{"class":59,"line":60},[57,778,324],{"class":70},[57,780,152],{"class":63},[57,782,783,785,787,789],{"class":59,"line":84},[57,784,157],{"class":70},[57,786,160],{"class":63},[57,788,163],{"class":70},[57,790,166],{"class":63},[57,792,793,795,797,799],{"class":59,"line":99},[57,794,341],{"class":70},[57,796,160],{"class":63},[57,798,346],{"class":70},[57,800,166],{"class":63},[57,802,803,805,807,809],{"class":59,"line":113},[57,804,446],{"class":70},[57,806,160],{"class":63},[57,808,384],{"class":70},[57,810,166],{"class":63},[57,812,813,816,818,820,822],{"class":59,"line":127},[57,814,815],{"class":70},"  padding",[57,817,160],{"class":63},[57,819,176],{"class":70},[57,821,180],{"class":179},[57,823,166],{"class":63},[57,825,826],{"class":59,"line":752},[57,827,187],{"class":63},[57,829,830],{"class":59,"line":762},[57,831,833],{"emptyLinePlaceholder":832},true,"\n",[57,835,837,840],{"class":59,"line":836},8,[57,838,839],{"class":70},".menu",[57,841,152],{"class":63},[57,843,845,847,849,851],{"class":59,"line":844},9,[57,846,157],{"class":70},[57,848,160],{"class":63},[57,850,163],{"class":70},[57,852,166],{"class":63},[57,854,856,858,860,862,864],{"class":59,"line":855},10,[57,857,171],{"class":70},[57,859,160],{"class":63},[57,861,176],{"class":70},[57,863,180],{"class":179},[57,865,166],{"class":63},[57,867,869],{"class":59,"line":868},11,[57,870,187],{"class":63},[44,872,873,874,876,877,879],{},"Le ",[22,875,324],{}," répartit logo et menu. Le ",[22,878,839],{}," est lui-même un conteneur flex : on peut imbriquer autant de conteneurs que nécessaire.",[881,882,883],"note",{},[44,884,885],{},"Flexbox est parfait pour une barre de navigation, une rangée de boutons ou une carte. Pour une grille à lignes et colonnes, le cours suivant présente la grille CSS.",[10,887,889],{"id":888},"à-retenir","À retenir",[15,891,892,897,908,913,918,923],{},[18,893,894,896],{},[22,895,24],{}," sur un parent aligne ses enfants directs en ligne ou en colonne.",[18,898,899,901,902,904,905,907],{},[22,900,237],{}," définit l'axe principal ; ",[22,903,31],{}," agit dessus, ",[22,906,35],{}," agit sur l'axe secondaire.",[18,909,910,912],{},[22,911,208],{}," crée un espace régulier entre les éléments.",[18,914,915,917],{},[22,916,491],{}," autorise le retour à la ligne.",[18,919,920,922],{},[22,921,624],{}," combine croissance, rétrécissement et taille de départ.",[18,924,925],{},"On peut imbriquer des conteneurs flex dans d'autres.",[927,928,929],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}",{"title":53,"searchDepth":84,"depth":99,"links":931},[932,933,934,935,936,937,938,939,940],{"id":12,"depth":84,"text":13},{"id":41,"depth":84,"text":42},{"id":212,"depth":84,"text":213},{"id":313,"depth":84,"text":314},{"id":419,"depth":84,"text":420},{"id":484,"depth":84,"text":485},{"id":547,"depth":84,"text":548},{"id":641,"depth":84,"text":642},{"id":888,"depth":84,"text":889},"Aligner et répartir des éléments sur une ligne ou une colonne avec display flex, gap, justify-content et align-items.","md",{},[945,946,237,31,35,208,947,601,224],"flexbox","display flex","flex-wrap","intermediaire","\u002Fcss\u002Fflexbox",[951],"\u002Fcss\u002Fboites-et-texte",[953,957,960],{"nom":954,"url":955,"type":956},"MDN, Flexbox","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FCSS_layout\u002FFlexbox","cours",{"nom":958,"url":959,"type":956},"MDN, Les dispositions CSS","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FCSS_layout",{"nom":961,"url":962,"type":963},"Grafikart, Formation CSS","https:\u002F\u002Fgrafikart.fr\u002Fformations\u002Fcss","video",{"title":5,"description":941},[966],{"nom":954,"url":955},"css\u002F04.flexbox","-9fhgoL4fSpkh2YmJPrTUddz6lZg-8VR2f7YCngpr9M",[970,974,978,981,982,986,990],{"path":971,"title":972,"stem":973},"\u002Fcss\u002Fpremiers-pas","Premiers pas en CSS","css\u002F01.premiers-pas",{"path":975,"title":976,"stem":977},"\u002Fcss\u002Fcascade-et-specificite","Cascade et spécificité","css\u002F02.cascade-et-specificite",{"path":951,"title":979,"stem":980},"Boîtes, unités et texte","css\u002F03.boites-et-texte",{"path":949,"title":5,"stem":967},{"path":983,"title":984,"stem":985},"\u002Fcss\u002Fgrid-et-responsive","Grid et responsive","css\u002F05.grid-et-responsive",{"path":987,"title":988,"stem":989},"\u002Fcss\u002Fvariables-et-animations","Variables, transitions et animations","css\u002F06.variables-et-animations",{"path":991,"title":992,"stem":993},"\u002Fcss","CSS","css\u002Findex",[995,997],{"title":979,"path":951,"stem":980,"description":996,"children":-1},"Le modèle de boîte (margin, border, padding, box-sizing), les unités de longueur et la typographie de base.",{"title":984,"path":983,"stem":985,"description":998,"children":-1},"Créer des grilles avec CSS Grid et adapter une page à tous les écrans avec les media queries, en partant du mobile.",[1000],{"path":951,"title":979,"ligne":142},[1002,1004,1005,1006,1007,1008,1010],{"path":971,"title":972,"niveau":1003,"stem":973},"debutant",{"path":975,"title":976,"niveau":1003,"stem":977},{"path":951,"title":979,"niveau":1003,"stem":980},{"path":949,"title":5,"niveau":948,"stem":967},{"path":983,"title":984,"niveau":948,"stem":985},{"path":987,"title":988,"niveau":1009,"stem":989},"avance",{"path":991,"title":992,"niveau":1011,"stem":993},"memo",1794583447151]