Notes primaires sur premi\u00e8re impl\u00e9mentation des flex CSS<\/p>\n\n\n\n
Commandes de bases pour positionnement et alignement …<\/p>\n\n\n\n
\n.main {\n\tdisplay:flex;\n\t\n\n\t\n\t\n\t\/*\n\tflex-direction : row; \n\tflex-wrap : wrap;\n\t*\/\n\t\n\t\/* combine flex direction et flex wrap *\/\n\tflex-flow : row wrap;\n\t\n\t\/* espacement des \u00e9l\u00e9ments *\/\n\tjustify-content : center;\n\tjustify-content : space-around;\n\tjustify-content : space-between;\n\n\theight : 600px;\n\tbackground-color : #EEE;\n\t\n\t\/* les \u00e9l\u00e9ments sont \u00e9tir\u00e9s en hauteur *\/\n\t\n\talign-items : stretch ; \/* valeur par defaut --> \u00e9tire en hauteur *\/\n\talign-items : flex-start ; \/* aligne sur la ligne du haut *\/\n\talign-items : flex-end ; \/* aligne sur la ligne du bas *\/\n\talign-items : center ; \/* centre par rapport \u00e0 la hauteur sans deformation *\/\n\n\t\/* ne sert que si on a plusieurs lignes *\/\n\talign-content : space-between;\n\t\n}\n\n\n\/* Comportement enfant *\/\n\n.image {\n\t\n\tflex-grow : 1;\n\t\n\t\/* change m\u00e9thode de calcul des flex-shrink et flex-grow) *\/\n\t\/* flex-basis : 50% *\/\n}\n\n.image:first-child{\n\t\n\torder : 2 ; \/* D\u00e9fintion de l'emplacement *\/\n\t\n\t\/* indique comment l'\u00e9l\u00e9ment doit s'agrandir par rapport \u00e0 l'espace environnement *\/\n\t\/* flex-grow : 2; *\/\n\t\n\t\/* proprit\u00e9 inverse *\/\n\tflex-shrink : 2;\n\t\n\t\/* Alignement horizontal de l'\u00e9l\u00e9ment *\/\n\talign-self : flex-end;\n\t\n}\n\t\n\t\n.image:nth-child(2){\n\t\n\torder : 1 ; \/* D\u00e9fintion de l'emplacement *\/\n\t\n\t\n}\n\t\n\t\n\t\n\/* ******************************** *\/\n\/* **Menu ** *\/\n\/* ******************************** *\/\n\n.menu {\n\t\n\theight : 80px;\n\tbackground-color : #eed;\n\tdisplay: flex;\n\t\n\talign-items: center ;\/* aligner par rapport au centre *\/\n\talign-content : center;\n\tjustify-content : end ; \/* Espacement entre les \u00e9l\u00e9ments *\/\n\t\n\tflex-wrap : wrap; \/* va \u00e0 la ligne lorsque les \u00e9l\u00e9ments ne peuvent plus rentrer *\/\n\t\n}\n\n.menu a {\n\tpadding : 0 5px;\n}\n\n@media (max-width: 500px) {\n\t\n\t.menu {\n\t\t\n\t\tflex-direction : column;\n\t\theight : 180px;\n\t}\n\t\n}\n\t\n\t\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Notes primaires sur premi\u00e8re impl\u00e9mentation des flex CSS Commandes de bases pour positionnement et alignement …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-1395","post","type-post","status-publish","format-standard","hentry","category-_dev"],"_links":{"self":[{"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/posts\/1395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1395"}],"version-history":[{"count":2,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/posts\/1395\/revisions"}],"predecessor-version":[{"id":1397,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=\/wp\/v2\/posts\/1395\/revisions\/1397"}],"wp:attachment":[{"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogperso.union31.fr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}