Quan maquetem fent servir flex, hem de con\u00e9ixer algunes propietats dels \u00edtems flex:<\/p>\n\n\n\n
flex-grow<\/code><\/li>\n\n\n\nflex-shrink<\/code><\/li>\n\n\n\nflex-basis<\/code><\/li>\n\n\n\norder<\/code><\/li>\n\n\n\nalign-self<\/code><\/li>\n<\/ul>\n\n\n\nLa paraula flex fa refer\u00e8ncia a la flexibilitat dels \u00edtems flex. Quan treballem amb flex, els elements s\u00f3n el\u00e0stics i poden encongir-se o expandir-se. Els valors d’amplada i al\u00e7ada no sempre es respectaran, \u00e9s important entendre aix\u00f2<\/strong>.<\/p>\n\n\n\nIgual que tenim un eix principal i un eix secundari, tamb\u00e9 tenim una mida secund\u00e0ria (la cross size) i una mida prim\u00e0ria (la main size). Quan el flex-direction \u00e9s row, la cross size \u00e9s l’al\u00e7ada, Quan la flex-direction \u00e9s column, la cross size \u00e9s l’amplada.<\/p>\n\n\n\n
Aquest \u00e9s el comportament de la dimensi\u00f3 secund\u00e0ria (cross-size):<\/p>\n\n\n\n
\n- Si la flex-direction \u00e9s \u00abrow\u00bb i hem definit una al\u00e7ada d’un \u00edtem flex, aquesta al\u00e7ada es respectar\u00e0. Si la flex-direction \u00e9s \u00abcolumn\u00bb i hem definit una amplada d’un \u00edtem flex, aquesta amplada es respectar\u00e0.<\/li>\n\n\n\n
- Si no s’ha definit la cross-size (al\u00e7ada per flex-direction \u00abrow\u00bb, amplada per flex-direction \u00abcolumn\u00bb), el navegador estirar\u00e0 l’\u00edtem per a colonitzar tot l’espai disponible (horitzontalment en la flex-column, verticalment en la flex-row)<\/li>\n\n\n\n
- Si la propietat align-content o align-items t\u00e9 un valor diferent de stretch, les dimensions sera determinades per el contingut<\/li>\n<\/ul>\n\n\n\n
En canvi, aquest \u00e9s el comportament de la dimensi\u00f3 principal (main size):<\/p>\n\n\n\n
\n- Si no s’ha definit la mida, es calcular\u00e0 segons el contingut. Si la flex-direction \u00e9s \u00abrow\u00bb, els flex \u00edtems ocuparan l’espai horitzontal necessari per a mostrar-ne el contingut. Si la flex-direction \u00e9s \u00abcolumn\u00bb, els flex \u00edtems ocuparan l’espai vertical necessari per a mostrar-ne el contingut.<\/li>\n\n\n\n
- Si s’ha definit la mida, aquesta podria respectar-se, encongir-se o cr\u00e9ixer.<\/li>\n<\/ul>\n\n\n\n
\u00c9s important, doncs, entendre com es comportaran els elements en l’eix principal, com es modificar\u00e0 la seva dimensi\u00f3 principal (main-size)<\/p>\n\n\n\n
Els flex \u00edtems ocuparan l’espai resultant de sumar la dimensi\u00f3 principal de tots els flex-items en l’eix principal, m\u00e9s els marges (si n’hi ha). Si la flex-direction \u00e9s \u00abrow\u00bb, aleshores els \u00edtems ocuparan horitzontalment la suma de les seves amplades i marges. Aquest \u00e9s l’espai ocupat<\/strong>.<\/p>\n\n\n\nL’espai disponible<\/strong> \u00e9s la difer\u00e8ncia entre la mida del contenidor i l’espai ocupat. Aquesta difer\u00e8ncia pot ser un n\u00famero positiu o negatiu.<\/p>\n\n\n\nSi l’espai disponible \u00e9s negatiu (els \u00edtems ocupen m\u00e9s espai del que n’hi ha), els flex \u00edtems s’encongiran per tenir espai en una sola l\u00ednia. Els marges, per\u00f2, no es modificaran.<\/p>\n\n\n\n
Com que les mides que definim s\u00f3n nom\u00e9s un punt de partida, parlem de mida \u00abbase\u00bb o flex-basis<\/em>. La propietat flex-basis<\/em> defineix la mida de la qual partim<\/strong> abans de que s’apliquin els estiraments o encongiments necessaris.<\/p>\n\n\n\nQuan la flex-direction \u00e9s \u00abrow\u00bb, el flex-basis defineix el punt de partida de l’amplada. Quan la flex-direction \u00e9s \u00abcolumn\u00bb, el flex-basis defineix el punt de partida de l’al\u00e7ada. Cal tenir en compte:<\/p>\n\n\n\n
\n- L’amplada o al\u00e7ada definida amb flex-basis sempre guanya per sobre de la definida amb les propietats width o height<\/li>\n\n\n\n
- Si no definim el valor flex-basis, o si li donem el valor \u00abauto\u00bb, es tindr\u00e0 en compte el valor de width o height, segons el cas (si \u00e9s row o column).<\/li>\n\n\n\n
- Si no es defineix un valor per flex-basis ni s’especifica l’amplada o l’al\u00e7ada, les dimensions seran determinades per el contingut.<\/li>\n<\/ul>\n\n\n\n
Aleshores, com es distribueix l’espai disponible?<\/strong> Aqu\u00ed entren en joc les propietats flex-grow<\/em> i flex-shrink<\/em>.<\/p>\n\n\n\nSi l’espai disponible \u00e9s un valor positiu, els \u00edtems flex creixeran per colonitzar l’espai. Es repartiran l’espai segons all\u00f2 especificat amb el valor flex-grow <\/em>a cada \u00edtem. Si tots els \u00edtems tenen flex-grow<\/em> igual a \u00ab1\u00bb, aleshores l’espai es repartir\u00e0 en parts iguals. Per\u00f2 si un dels \u00edtems t\u00e9 un flex-grow igual a 2, aquest \u00edtem rebr\u00e0 el doble d’espai que els altres.<\/p>\n\n\n\nExemple:<\/p>\n\n\n\n
.container { \nwidth: 500px; \n} \n.item-1 { \nflex-basis: 100px ; \nflex-grow: 1 \n} \n.item-2 { \nflex-basis: 100px ; \nflex-grow: 2 \n} \n.item-3 { \nflex-basis: 100px ; \nflex-grow: 1 \n} \n.item-4 { \nflex-basis: 100px ; \nflex-grow: 1\n}<\/code><\/pre>\n\n\n\n\nEn aquest exemple, la suma de les flex-basis fa 400px, per\u00f2 l’espai disponible \u00e9s de 500px. Cadascun dels \u00edtems rebr\u00e0 una part dels 100 p\u00edxels restants. Si sumem tots els valors de flex-grow, obtenim 5 unitats. Si dividim els 100 p\u00edxels entre 5 unitats, obtenim 20px disponibles per cada unitat de flex-grow. Com que l’.item-2 t\u00e9 un flex-grow de 2, rebr\u00e0 40px addicionals (20px * 2 flex-grow = 40px). El resultat ser\u00e0:<\/p>\n\n\n\n
\n- .item-1 : 120px;<\/li>\n\n\n\n
- .item-2: 140px;<\/li>\n\n\n\n
- .item-3: 120px;<\/li>\n\n\n\n
- .item-4: 120px;<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n
La suma de les amplades dels 4 \u00edtems flex, far\u00e0 500px;<\/p>\n\n\n\n
IMPORTANT: Si els \u00edtems flex tinguessin marges, haur\u00edem de sumar el seu espai al espai ocupat, i l’espai disponible seria menor.<\/strong><\/p>\n\n\n\n\nExercici<\/p>\n\n\n\n
Quina seria l’amplada de cada \u00edtem flex si el CSS fos aquest?<\/p>\n\n\n\n
.container { \nwidth: 500px; \n} \n.container > *{\nmargin:5px;\n}\n.item-1 { \nflex-basis: 100px ; \nflex-grow: 1 \n} \n.item-2 { \nflex-basis: 100px ; \nflex-grow: 2 \n} \n.item-3 { \nflex-basis: 100px ; \nflex-grow: 1 \n} \n.item-4 { \nflex-basis: 100px ; \nflex-grow: 1\n}<\/code><\/pre>\n<\/div><\/div>\n\n\n\nI qu\u00e8 passa si l’espai disponible \u00e9s un valor negatiu?<\/strong><\/p>\n\n\n\nQuan l’espai no \u00e9s suficient i els flex-items s’han d’encongir, ho faran en proporci\u00f3 al valor definit amb flex-shrink. Aquest valor funciona igual que flex-grow, per\u00f2 actua s’obre l’encongiment.<\/p>\n\n\n\n
IMPORTANT: Un \u00edtem sempre t\u00e9 una mida m\u00ednima determinada per el seu contingut. Podem for\u00e7ar una mida m\u00ednima amb les propietats min-width i min-height.<\/strong><\/p>\n\n\n\nPodem indicar el valor de flex-grow, flex-shrink i flex-basis en una sola l\u00ednia, fent servir la propietat abreviada \u00abflex\u00bb. Per defecte, els flex \u00edtems tenen el seg\u00fcent valor de la propietat flex:<\/p>\n\n\n\n
flex: 0 1 auto;<\/code><\/pre>\n\n\n\nAix\u00f2 signfica que:<\/p>\n\n\n\n
\n- El valor per defecte de flex-grow \u00e9s 0<\/li>\n\n\n\n
- El valor per defecte de flex-shrink \u00e9s 1<\/li>\n\n\n\n
- El valor per defecte de flex-basis \u00e9s auto (la mida ve determinada per el seu contingut)<\/li>\n<\/ul>\n\n\n\n
Altres possibles valors de flex s\u00f3n:<\/p>\n\n\n\n
\n- flex: auto;
Equival a flex: 1 1 auto;
Els \u00edtems poden cr\u00e9ixer o reduir-se segons sigui necessari. El flex-basis est\u00e0 determinat per el contingut de cada \u00edtem.<\/li>\n\n\n\n - flex: none;
Equivalent de flex: 0 0 auto;
Els \u00edtems no poden ni cr\u00e9ixer ni encongir-se. El flex-basis est\u00e0 determinat per el contingut de cada \u00edtem.<\/li>\n\n\n\n - flex: 1;
Equival a flex: 1 1 0;
(tamb\u00e9 podria ser flex:2 , flex:3,…)
<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Quan maquetem fent servir flex, hem de con\u00e9ixer algunes propietats dels \u00edtems flex: La paraula flex fa refer\u00e8ncia a la flexibilitat dels \u00edtems flex. Quan treballem amb flex, els elements s\u00f3n el\u00e0stics i poden encongir-se o expandir-se. Els valors d’amplada i al\u00e7ada no sempre es respectaran, \u00e9s important entendre aix\u00f2. Igual que tenim un eix… Continueu llegint Display flex – maquetaci\u00f3<\/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-329","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/329","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=329"}],"version-history":[{"count":2,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/329\/revisions"}],"predecessor-version":[{"id":333,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/329\/revisions\/333"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}