{"id":221,"date":"2023-06-05T15:59:56","date_gmt":"2023-06-05T13:59:56","guid":{"rendered":"https:\/\/user0.gesem.es\/blog\/?page_id=221"},"modified":"2023-06-20T21:32:26","modified_gmt":"2023-06-20T19:32:26","slug":"display-flex","status":"publish","type":"page","link":"https:\/\/user0.gesem.es\/blog\/display-flex\/","title":{"rendered":"Display flex"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">El display flex \u00e9s un dels recursos per maquetar p\u00e0gines web, ja que ens permet distribuir elements en l&#8217;eix horitzontal i vertical. L&#8217;\u00fas d&#8217;aquest display per a maquetar s&#8217;anomena \u00abflexbox\u00bb<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Els elements amb un display del tipus flex actuen com a \u00ab<strong>contenidors<\/strong> flex\u00bb i els \u00edtems que contenen actuen com a \u00ab<strong>items<\/strong> flex\u00bb.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"140\" src=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-1-1024x140.png\" alt=\"\" class=\"wp-image-224\" srcset=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-1-1024x140.png 1024w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-1-300x41.png 300w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-1-768x105.png 768w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-1.png 1161w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A l&#8217;hora de fer servir el display flex, hem de tenir clars alguns conceptes b\u00e0sics:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Eix principal<\/strong> i <strong>eix secundari<\/strong><\/li>\n\n\n\n<li>Concepte de <strong>Start<\/strong> i <strong>End<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Per defecte, els items flex es col\u00b7loquen un al costat de l&#8217;altre, en un eix horitzontal. Aix\u00f2 \u00e9s aix\u00ed perqu\u00e8 el valor<strong> flex-direction<\/strong> \u00e9s, per defecte \u00abrow\u00bb. Podem canviar aquest valor per flex-direction:column si volem que es col\u00b7loquin un a sota l&#8217;altre. Quan flex-direction \u00e9s \u00abrow\u00bb, l&#8217;eix principal \u00e9s horitzontal. Quan flex-direction \u00e9s \u00abcolumn\u00bb, l&#8217;eix principal \u00e9s vertical. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"395\" height=\"172\" src=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-3.png\" alt=\"\" class=\"wp-image-226\" srcset=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-3.png 395w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-3-300x131.png 300w\" sizes=\"auto, (max-width: 395px) 100vw, 395px\" \/><figcaption class=\"wp-element-caption\">flex-direction: row;<br>flex-direction: row-reverse<br>flex-direction: column;<br>flex-direction:column-reverse;<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Per defecte, un element es col\u00b7locar\u00e0 al costat de l&#8217;altre. El contingut sortir\u00e0 de la caixa del contenidor flex si no hi ha prou espai per tots els \u00edtems flex. Aix\u00f2 \u00e9s aix\u00ed perqu\u00e8 el valor de la propietat <strong>flex-wrap<\/strong> \u00e9s \u00abnowrap\u00bb per defecte. Si volem que els \u00edtems flex formin una graella (es col\u00b7loquin a una nova l\u00ednia si ja no hi ha espai horitzontal), aleshores podem canviar el valor de flex-wrap a \u00abwrap\u00bb<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"372\" height=\"198\" src=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-4.png\" alt=\"\" class=\"wp-image-227\" srcset=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-4.png 372w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-4-300x160.png 300w\" sizes=\"auto, (max-width: 372px) 100vw, 372px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Quan el flex-direction \u00e9s del tipus row, els \u00edtems flex es col\u00b7loquen un al costat de l&#8217;altre i ocupen el mateix espai vertical. Si el contenidor flex t\u00e9 una al\u00e7ada definida (amb la propietat height), els \u00edtems flex faran tamb\u00e9 aquesta al\u00e7ada. Si no s&#8217;ha definit una al\u00e7ada per al contenidor, o si un dels elements \u00e9s m\u00e9s gran que aquest valor,  els \u00edtems flex seran tan alts com l&#8217;\u00edtem flex m\u00e9s alt. Aix\u00f2 \u00e9s aix\u00ed perqu\u00e8 el valor de la propietat <strong>align-items<\/strong> \u00e9s, per defecte, stretch.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"377\" height=\"470\" src=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-5.png\" alt=\"\" class=\"wp-image-228\" srcset=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-5.png 377w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-5-241x300.png 241w\" sizes=\"auto, (max-width: 377px) 100vw, 377px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Com pots veure, la propietat align-items no actua sobre l&#8217;eix principal (el del flex-direction) sin\u00f3 sobre l&#8217;eix secundari (el perpendicular). Si el valor d&#8217;align-items \u00e9s \u00abflex-start\u00bb, aleshores els \u00edtems s&#8217;alinearan segons l&#8217;ordre de lectura de l&#8217;idioma de la p\u00e0gina web. Si el valor de align-items \u00e9s flex-end, els \u00edtems flex s&#8217;alinearan al final. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Fixa&#8217;t que no parlem ni de dreta i esquerra ni d&#8217;adalt i a baix. Parlem de start i end. Si l&#8217;idioma de la p\u00e0gina es llegeix d&#8217;esquerra a dreta i de dalt a baix, flex-start ser\u00e0 l&#8217;esquerra superior i flex-end la dreta inferior. Per\u00f2 en un idioma com l&#8217;\u00e0rab ser\u00e0 diferent.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Els \u00edtems flex d&#8217;un conteanidor amb flex-direction \u00abrow\u00bb, colonitzaran l&#8217;espai horitzontal, intentant repartir-se l&#8217;espai entre ells. Per\u00f2 si cadascun d&#8217;aquests \u00edtems t\u00e9 definida una amplada (width), aleshores els \u00edtems es repartiran l&#8217;espai que quedi disponible. Aix\u00f2 \u00e9s aix\u00ed perqu\u00e8, per defecte el valor de la propietat <strong>justify-content <\/strong>\u00e9s \u00abnormal\u00bb.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Per\u00f2 justify-content pot tenir altres valors:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>flex-end<\/li>\n\n\n\n<li>flex-start<\/li>\n\n\n\n<li>center<\/li>\n\n\n\n<li>space-between<\/li>\n\n\n\n<li>space-around<\/li>\n\n\n\n<li>space-evenly<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"393\" height=\"594\" src=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-6.png\" alt=\"\" class=\"wp-image-229\" srcset=\"https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-6.png 393w, https:\/\/user0.gesem.es\/blog\/wp-content\/uploads\/2023\/06\/imagen-6-198x300.png 198w\" sizes=\"auto, (max-width: 393px) 100vw, 393px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Justify-content controla com es reparteixen l&#8217;espai en l&#8217;eix principal<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quan la propietat de flex-wrap \u00e9s wrap, els \u00edtems que no tenen prou espai passen a una nova l\u00ednia (si la flex-direction \u00e9s \u00abrow\u00bb) o a una nova columna (quan la flex-direction \u00e9s \u00abcolumn\u00bb). Quan aix\u00f2 passa, les files o columnes es reparteixen per l&#8217;espai omplint tota la caixa en la dimensi\u00f3 secund\u00e0ria. Aix\u00f2 \u00e9s aix\u00ed perqu\u00e8 el valor de la propietat <code>align-content<\/code> \u00e9s \u00abstretch\u00bb per defecte.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Altres possibles valors de align-content s\u00f3n: flex-start, flex-end, space-between, space-around i center.<\/p>\n\n\n\n<div class=\"wp-block-group exercici\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Exercici<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Visita aquesta web i experimenta amb les diferents opcions del flexbox<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codepen.io\/enxaneta\/full\/adLPwv\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/enxaneta\/full\/adLPwv\/ <\/a><\/p>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Pots practicar totes aquestes propietats a aquesta web:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/flexboxfroggy.com\/#es\">https:\/\/flexboxfroggy.com\/#es<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El display flex \u00e9s un dels recursos per maquetar p\u00e0gines web, ja que ens permet distribuir elements en l&#8217;eix horitzontal i vertical. L&#8217;\u00fas d&#8217;aquest display per a maquetar s&#8217;anomena \u00abflexbox\u00bb Els elements amb un display del tipus flex actuen com a \u00abcontenidors flex\u00bb i els \u00edtems que contenen actuen com a \u00abitems flex\u00bb. A l&#8217;hora&hellip; <a class=\"more-link\" href=\"https:\/\/user0.gesem.es\/blog\/display-flex\/\">Continueu llegint <span class=\"screen-reader-text\">Display flex<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-221","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":9,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/221\/revisions"}],"predecessor-version":[{"id":331,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/221\/revisions\/331"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}