construcciÓn de pÁginas web -...
TRANSCRIPT
![Page 1: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/1.jpg)
CONSTRUCCIÓN DE PÁGINAS WEB
©SantiagoMartíndeJesús
v Crearelarchivo"comentarios.html”ycomprobarque,aunqueloscomentariosescritosestánpresentesenelcódigofuente,nosemuestranenpantalla:
EJERCICIO
SOLUCIÓN AL EJERCICIO
@media(min-width:500px){h1{margin:1%;}.estiloresponsive{float:right;padding-left:15px;}}
![Page 2: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/2.jpg)
CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS
Flexbox y Grid
![Page 3: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/3.jpg)
CSS
3
Flexbox
El Módulo de Caja Flexible, comúnmente llamado Flexbox, fue creadocomo un modelo unidimensional de diseño, y como un método quepudiese ayudar a distribuir el espacio entre los ítems de una interfaz ymejorar las capacidades de alineación, principalmente para suplantar almodelodecajasflotantes(float).Decimos que Flexbox esta diseñado como modelo unidimensional, ydestacamoselhechoquemanejaeldiseñoenunasoladimensiónalavez— ya sea como fila o como columna. Esto contrasta con el modelobidimensionaldeGridLayoutdeCSS,elcualcontrolacolumnasyfilasalavez.
![Page 4: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/4.jpg)
CSS
4
Flexbox
ConceptosParaempezarautilizarflexboxloprimeroquedebemoshaceresconoceralgunos de los elementos básicos de este nuevo esquema, que son lossiguientes:Contenedor: Existe un elemento padre que es el contenedor que tendrá en suinteriorcadaunodelosítemsflexiblesyadaptables.Ítem:Cadaunodeloshijosflexiblesquecontendráelcontenedorensuinterior.Eje principal: Los contenedores flexibles tendrán una orientación principalespecífica.Pordefecto,esenhorizontal(fila).Eje secundario: De la misma forma, los contenedores flexibles tendrán unaorientaciónsecundaria,perpendicularalaprincipal.Silaprincipalesenhorizontal,lasecundariaseráenvertical,yviceversa.
![Page 5: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/5.jpg)
CSS
5
Flexbox
LosdosejesdeflexboxCuando trabajamos con flexboxnecesitamospensar en términosdedosejes—elejeprincipalyelejecruzado.El eje principal está definido por la propiedad flex-direction, y el ejecruzadoesperpendicularaeste.Todoloquehacemosconflexboxestáreferidoaestosdosejes,porloquevalelapenaentendercómotrabajandesdeelprincipio.
align-contentalign-itemsalign-selfflex
flex-basisflex-directionflex-flowflex-grow
flex-shrinkflex-wrapjustify-contentorderplace-content
Propiedades de Flexbox
![Page 6: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/6.jpg)
CSS
6
ElejeprincipaloMainAxis
Elejeprincipalestádefinidoporflex-direction,queposeecuatroposiblesvalores:
– row– row-reverse– column– column-reverse
Sielegimosroworow-reverse,elejeprincipalcorreráalolargodelafilasegúnladireccióndelalínea.
![Page 7: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/7.jpg)
CSS
7
ElejeprincipaloMainAxis
Al elegir column o column-reverse el eje principal irá desde el bordesuperior del bloque hasta el final o desde abajo hacia arribarespectivamente.
![Page 8: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/8.jpg)
CSS
8
ElejecruzadooCrossAxis
El eje cruzado va perpendicular al eje principal, y por lo tanto si flex-direction(delejeprincipal)esroworow-reverseelejecruzadoiráporlascolumnas.
![Page 9: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/9.jpg)
CSS
9
ElejecruzadooCrossAxis
Si el eje principal es column o column-reverse entonces el eje cruzadocorrealolargodelasfilas.
Identificar cuál es cada uno de de los ejes, es importante cuandoempezamos a mirar la alineación y justificación flexible de los ítems;flexboxposeepropiedadesquepermitenalineary justificarelcontenidosobreunejeoelotro.
![Page 10: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/10.jpg)
CSS
10
Elcontenedorflex
Unáreadeldocumentoquecontieneunflexboxesllamadacontendedorflex. Para crear un contenedor flex, establecemos la propiedad del áreadelcontenedordisplaycomoflexoinline-flex.Tanprontocomohacemosesto, loshijosdirectosdeestecontenedorsevuelven ítems flex. Como con todas las propiedades de CSS, se definenalgunos valores iniciales, así que cuando creemos un contenedor flextodoslosítemsflexcontenidossecomportarándelasiguientemanera.
§ Los ítemssedespliegansobreunafila(lapropiedadflex-directionpordefectoesrow).
§ Losítemsempiezandesdeelmargeninicialsobreelejeprincipal.§ Losítemsnoseajustanenladimensiónprincipal,perosepueden
contraer.§ Losítemsseajustaránparallenareltamañodelejecruzado.§ Lapropiedadflex-basisesdefinidacomoauto.§ Lapropiedadflex-wrapesdefinidacomonowrap.
![Page 11: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/11.jpg)
CSS
11
Elcontenedorflex
Elresultadoesquetodoslosítemssealinearánenunasolafila,usandoeltamañodel contenedor como su tamañoen el eje principal. Si haymásítemsdelosquecabenenelcontenedor,estosnopasaránmásabajosinoquesobrepasaránelmargen.Sihayítemsmásaltosqueotros,todoslosítemsseránajustadosenelejecruzado,paraigualaralitemmayor.
<divclass="box"><div>Uno</div><div>Dos</div><div>Tres<br>contiene<br>texto<br>extra</div></div>
.box{display:flex;}
![Page 12: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/12.jpg)
CSS
12
Elcontenedorflex
flex-directionMediante lapropiedad flex-directionpodemosmodificar ladireccióndeleje principal del contenedor para que se oriente en horizontal (pordefecto)oenvertical.Además,tambiénpodemosincluirelsufijo-reverseparaindicarquecoloquelosítemsenordeninverso.
<divclass="box"><div>Uno</div><div>Dos</div><div>Tres</div></div>
.box{display:flex;flex-direction:row-reverse;}
v Pruebalosotrosvalores—row,columnycolumn-reverse—paraverquésucedeconelcontenido.
EJERCICIO
Valor Descripciónrow Estableceladireccióndelejeprincipalenhorizontal.row-reverse Estableceladireccióndelejeprincipalenhorizontal(invertido).column Estableceladireccióndelejeprincipalenvertical.column-reverse Estableceladireccióndelejeprincipalenvertical(invertido).
![Page 13: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/13.jpg)
CSS
13
ContenedoresflexMulti-líneaconflex-wrap
flex-wrapAunque flexbox es unmodelo unidimensional, es posible lograr que losítems flex sean repartidos en varías líneas. Haciendo esto, se deberáconsiderar cada línea como un nuevo contenedor flex. Cualquierdistribucióndelespaciosolosucederádentrodeesalínea,sinreferenciarlaslíneascolaterales.Para lograr repartirse en varias líneas hay que añadir la propiedad flex-wrap con el valor wrap. Cuando los ítems sean demasiados paradesplegarlosenunalínea,seránrepartidosenlalíneasiguiente.
Valor Descripciónnowrap Establecelosítemsenunasolalínea(nopermitequesedesbordeel
contenedor).wrap Establecelosítemsenmodomultilínea(permitequesedesbordeel
contenedor).wrap-reverse Establecelosítemsenmodomultilínea,peroendireccióninversa.
![Page 14: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/14.jpg)
CSS
14
ContenedoresflexMulti-líneaconflex-wrap
<divclass="box"><div>Uno</div><div>Dos</div><div>Tres</div></div>
.box{display:flex;flex-wrap:wrap;}
El ejemplo siguiente contiene ítems que se les ha asignando un ancho,dondeelanchototalde los ítemsexcedealdelcontenedorflex.Cuandoflex-wrapsecolocacomowrap,losítemsserepartirán.Alcolocarlocomonowrap,elcualeselvalorinicial,estossecontraeránparaajustarconelcontenedoryaqueusanlosvaloresinicialesdeflexboxquepermitenquelos ítems se contraigan. Al usar nowrap los ítems podrían salirse delmargensiestosnopudierancontraerse,onocontraerselosuficienteparaentrar.
![Page 15: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/15.jpg)
CSS
15
Laabreviaturaflex-flow
<divclass="box"><div>Uno</div><div>Dos</div><div>Tres</div></div>
.box{display:flex;flex-flow:rowwrap;}
Se pueden combinar las propiedades flex-direction y flex-wrap en laabreviatura flex-flow . El primer valor especificado es flex-direction y elsegundovaloresflex-wrap.
v Enelejemplo,intentacambiarelprimervalorporunodelosvalorespermitidosparaflex-direction:row,row-reverse,columnocolumn-reverse,ycambiatambiénelsegundovalorporwrapynowrap.
EJERCICIO
![Page 16: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/16.jpg)
CSS
16
Propiedadesdealineacióndeítems
Ahora que tenemos un control básico del contenedor de estos ítemsflexibles, necesitamos conocer las propiedades existentes dentro deflexboxparadisponerlosítemsdependiendodenuestroobjetivo.Vamosaecharunvistazoacuatropropiedadesinteresantesparaello:
Propiedad Valor Actúasobrejustify-content: flex-start|flex-end|center|space-between|space-around Ejeprincipalalign-content: flex-start|flex-end|center|space-between|space-around|
stretch Ejeprincipalalign-items: flex-start|flex-end|center|stretch|baseline Ejesecundarioalign-self: auto|flex-start|flex-end|center|stretch|baseline Ejesecundario
justify-content: Se utiliza para alinear los ítems del eje principal (pordefecto,elhorizontal).align-content: actúa sobre cada una de las líneas de un contenedormultilinea.align-items:Usadaparaalinearlosítemsdelejesecundario(pordefecto,elvertical).align-self:actúaexactamenteigualquealign-items,sinembargoseutilizasobreunítemhijoespecíficoynosobreelelementocontenedor.
![Page 17: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/17.jpg)
CSS
17
Propiedadesdealineacióndeítems
justify-content:Sirveparacolocar los ítemsdeuncontenedormedianteunadisposiciónconcretaalolargodelejeprincipal:Valor Descripciónflex-start Agrupalosítemsalprincipiodelejeprincipal.flex-end Agrupalosítemsalfinaldelejeprincipal.center Agrupalosítemsalcentrodelejeprincipal.space-between Distribuyelosítemsdejando(elmismo)espacioentreellos.space-around Distribuyelosítemsdejando(elmismo)espacioaambosladosdecada
unodeellos.
![Page 18: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/18.jpg)
CSS
18
Propiedadesdealineacióndeítems
align-content:Sirve para alinear cada una de las líneas del contenedormultilinea. Losvaloresquepuedetomarsonlossiguientes:Valor Descripciónflex-start Agrupalosítemsalprincipiodelejeprincipal.flex-end Agrupalosítemsalfinaldelejeprincipal.center Agrupalosítemsalcentrodelejeprincipal.space-between Distribuyelosítemsdesdeeliniciohastaelfinal.space-around Distribuyelosítemsdejandoelmismoespacioalosladosdecadauno.stretch Estiralosítemsparaocupardeformaequitativatodoelespacio.
![Page 19: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/19.jpg)
CSS
19
Propiedadesdealineacióndeítems
align-content:En el ejemplo siguiente, veremos que al indicar un contenedor de 200píxelsdealtocon ítemsde50pxdealtoyun flex-wrapestablecidoparatener contenedores multilinea, podemos utilizar la propiedad align-contentparaalinearlos ítemsdeformaverticaldemodoquesequedenenlazonainferiordelcontenedor:
#contenedor{background:#CCC;display:flex;width:200px;height:200px;flex-wrap:wrap;align-content:flex-end;}.item{background:#777;width:50%;height:50px;}
![Page 20: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/20.jpg)
CSS
20
Propiedadesdealineacióndeítems
align-items:Seencargadealinearlosítemsenelejesecundariodelcontenedor.Actúasobrecadaunadelaslíneasdeuncontenedormultilinea(notieneefectosobrecontenedoresdeunasolalínea).Losvaloresquepuedetomarsonlossiguientes:Valor Descripciónflex-start Alinealosítemsalprincipiodelejesecundario.flex-end Alinealosítemsalfinaldelejesecundario.center Alinealosítemsalcentrodelejesecundario.stretch Alinealosítemsestirándolosdemodoquecubrandesdeeliniciohasta
elfinaldelcontenedor.baseline Alinealosítemsenelcontenedorsegúnlabasedelcontenidodelosítems
delcontenedor.
![Page 21: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/21.jpg)
CSS
21
Propiedadesaplicadasalosítemsflex
align-self:Actúa exactamente igual que align-items, sin embargo es la primerapropiedad de flexbox que vemos que se utiliza sobre un ítem hijoespecífico y no sobre el elemento contenedor. Salvo por este detalle,funcionaexactamenteigualquealign-items.Gracias a esedetalle, align-self nospermite cambiar el comportamientode align-items y sobreescribirlo con comportamientos específicos paraítemsconcretosquenoqueremosquesecomportenigualqueelresto.Lapropiedadpuedetomarlossiguientesvalores:
Valor Descripciónflex-start Alinealosítemsalprincipiodelcontenedor.flex-end Alinealosítemsalfinaldelcontenedor.center Alinealosítemsalcentrodelcontenedor.stretch Alinealosítemsestirándolosaltamañodelcontenedor.baseline Alinealosítemsenelcontenedorsegúnlabasedelosítems.auto Heredaelvalordealign-itemsdelpadre(osinolotiene,stretch).
![Page 22: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/22.jpg)
CSS
22
Propiedadesaplicadasalosítemsflex
align-self:Si se especifica el valor auto a la propiedad align-self, el navegador leasigna el valor de la propiedad align-items del contenedor padre, y encasodenoexistir,elvalorpordefecto:stretch.
![Page 23: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/23.jpg)
CSS
23
Propiedadesaplicadasalosítemsflex
Sitenemostres ítemsconunanchode100pixelesenuncontenedorde500 pixeles de ancho, entonces el espacio que se necesita para colocarnuestros ítems es de 300 pixeles. Esto deja 200 pixeles de espaciodisponible. Si no cambiamos los valores iniciales entonces flexboxcolocaráeseespaciodespuésdelúltimoítem.
Siencambioquisiéramosquelosítemscrecieranparallenareseespacio,entonces necesitaríamos un método para distribuir el espacio sobranteentrelosítems.Esjustoloqueharánlaspropiedadesflexqueaplicaremosadichosítems.
![Page 24: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/24.jpg)
CSS
24
Propiedadesaplicadasalosítemsflex
Aexcepcióndelapropiedadalign-self,todaslaspropiedadesquehemosvistohastaahoraseaplicansobreelelementocontenedor.Lassiguientespropiedades, sin embargo, se aplican sobre los ítemshijos. Echemos unvistazo:
Propiedad Valor Descripciónflex-grow: 0|[factordecrecimiento] Númeroqueindicaelcrecimientodelítemrespecto
alresto.flex-shrink: 1|[factordedecrecimiento] Númeroqueindicaeldecrecimientodelítem
respectoalresto.flex-basis: [tamañobase]|content Tamañobasedelosítemsantesdeaplicarvariación.order: [número] Númeroqueindicaelordendeaparicióndelos
ítems.
![Page 25: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/25.jpg)
CSS
25
Propiedadesaplicadasalosítemsflex
flex-growIndicael factordecrecimientode los ítemsenelcasodequenotenganunanchoespecífico.Porejemplo,siconflex-growindicamosunvalorde1a todos sus ítems, tendríanelmismo tamañocadaunodeellos.Pero sicolocamosunvalorde1atodosloselementos,salvoaunodeellos,quele indicamos2,eseítemserámásgrandequelosanteriores.Losítemsalosquenoseleespecifiqueningúnvalor,tendránpordefectovalorde0.
![Page 26: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/26.jpg)
CSS
26
Propiedadesaplicadasalosítemsflex
flex-shrinkEs la complementaria a flex-grow. Mientras que la anterior indica unfactordecrecimiento,flex-shrinkhacejustolocontrario,aplicaunfactordedecrecimiento.Deestaforma,losítemsquetenganunvalornuméricomásgrande,seránmáspequeños,mientrasque losquetenganunvalornuméricomás pequeño seránmás grandes, justo al contrario de comofuncionalapropiedadflex-grow.
![Page 27: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/27.jpg)
CSS
27
Propiedadesaplicadasalosítemsflex
flex-basisDefine el tamañopor defecto (de base) que tendrán los ítems antes deaplicarle la distribución de espacio. Generalmente, se aplica un tamaño(unidades, porcentajes, etc...), pero también se puede aplicar la palabraclave content que ajusta automáticamente el tamaño al contenido delítem,queessuvalorpordefecto.Existe una propiedad llamada flex que sirve de atajo para estas trespropiedadesdelosítemshijos.Funcionadelasiguienteforma:
.item{/*flex:<flex-grow><flex-shrink><flex-basis>*/flex:1335%;}
![Page 28: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/28.jpg)
CSS
28
Propiedadesaplicadasalosítemsflex
orderPor último, y quizás unade las propiedadesmás interesantes, esorder,que modificar y establece el orden de los ítems según una secuencianumérica.
Pordefecto,todos los ítemsflextienenunorder:0 implícito,aunquenose especifique. Si indicamos un order con un valor numérico, irárecolocando los ítems según su número, colocando antes los ítems connúmeromáspequeño(inclusovaloresnegativos)ydespuéslosítemsconnúmerosmásaltos.Deestaformapodemosrecolocarfácilmente los ítems inclusoutilizandomediaqueriesoresponsivedesign.EjerciciosFlexboxhttps://webdesign.tutsplus.com/es/tutorials/exercises-in-flexbox-simple-web-components--cms-28049https://desarrolloweb.com/articulos/flexbox-align-items.htmlhttps://mape.neocities.org/flexbox.html
![Page 29: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/29.jpg)
CSS
29
Grid
UnodelosprocesosmásproblematicosyfrustrantesdeCSS,sobretodoparaprincipiantes,eselprocesodecolocarydistribuirloselementosalolargo de una página. Mecanismos como posicionamiento, floats oelementos en bloque o en línea, suelen ser insuficientes (o muycomplejos)paracrearunlayoutoestructurasparapáginaswebactuales.El sistema flexbox es una gran mejora, sin embargo, está orientado aestructurasdeunasoladimensión,porloqueaúnnecesitamosalgomáspotente para estructuras web. Con el paso del tiempo, muchosframeworks y librerías utilizan un sistema grid donde definen unacuadrículadeterminada, ymodificando losnombresde las clasesde loselementosHTML,podemosdarletamaño,posiciónocolocación.Grid CSS nace de esa necesidad, y recoge las ventajas de ese sistema,añadiendole numerosas mejoras y características que permiten crearrápidamentecuadrículassencillasypotentes.
![Page 30: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/30.jpg)
CSS
30
Grid
ConceptosPara utilizar Grid CSS necesitaremos tener en cuenta una serie deconceptos que utilizaremos a partir de ahora y que definiremos acontinuación:
![Page 31: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/31.jpg)
CSS
31
Grid
• Contenedor: Existe un elemento padre que es el contenedor quedefinirálacuadrículaorejilla.
• Ítem: Cada uno de los hijos que contiene la cuadrícula (elementocontenedor).
• Celda (grid cell): Cada uno de los cuadritos (unidad mínima) de lacuadrícula.
• Área(gridarea):Regiónoconjuntodeceldasdelacuadrícula.• Banda (grid track): Banda horizontal o vertical de celdas de la
cuadrícula.• Línea (grid line): Separador horizontal o vertical de las celdas de la
cuadrícula.
![Page 32: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/32.jpg)
CSS
32
Grid
ParautilizarcuadriculasGridCSS,trabajaremosbajoestecódigoHTML:
<divclass="grid"><!--contenedor--><divclass="a">Item1</div><!--cadaunodelosítemsdelgrid--><divclass="b">Item2</div><divclass="c">Item3</div><divclass="d">Item4</div></div>
Para activar la cuadrícula grid hay que utilizar sobre el elementocontenedor lapropiedaddisplay y especificarel valorgrid o inline-grid.Estevalor influyeencomosecomportará lacuadrículaconelcontenidoexterior.Elprimerodeellospermiteque lacuadrículaaparezcaencima/debajodelcontenidoexterior (enbloque)yel segundodeellospermitequelacuadrículaaparezcaalaizquierda/derecha(enlínea)delcontenidoexterior.
Elemento Descripcióninline-grid Estableceunacuadrículaconítemsenlínea,deformaequivalenteainline-block.grid Estableceunacuadrículaconítemsenbloque,deformaequivalenteablock.
![Page 33: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/33.jpg)
CSS
33
Propiedadesdelelementocontenedor
Gridconfilasycolumnasexplícitas
Es posible crear cuadrículas con un tamaño explícito. Para ello, sólotenemos que usar las propiedades CSS grid-template-columns y grid-template-rows,quesirvenparaindicarlasdimensionesdecadaceldadela cuadrícula, diferenciandoentre columnas y filas. Laspropiedades sonlassiguientes:
Propiedad Descripcióngrid-template-columns Estableceeltamañodelascolumnas(ejehorizontal).grid-template-rows Estableceeltamañodelasfilas(ejevertical).
Conociendoestasdospropiedades,escribamoselsiguientecódigoCSS:
.grid{display:grid;grid-template-columns:50px300px;grid-template-rows:200px75px;}
![Page 34: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/34.jpg)
CSS
34
Propiedadesdelelementocontenedor
Gridconfilasycolumnasexplícitas
Estosignificaquetendremosunacuadriculacon2columnas(laprimeracon50pxdeanchoylasegundacon300pxdeancho)ycon2filas(laprimeracon200pxdealto y la segunda con 75px de alto). Ahora, dependiendo del número de ítems(elementoshijos)quetengaelcontenedorgrid,tendremosunacuadrículade2x2elementos (4 ítems), 2x3 elementos (6 ítems), 2x4 elementos (8 ítems) y asísucesivamente.Sielnúmerodeítemsesimpar,laúltimaceldadelacuadrículasequedarávacía.
![Page 35: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/35.jpg)
CSS
35
Propiedadesdelelementocontenedor
Gridconfilasycolumnasexplícitas
Enesteejemploheutilizadopíxelscomounidadesdelasceldasdelacuadrícula,sin embargo, también podemos utilizar otras unidades (e incluso combinarlas)como porcentajes, la palabra clave auto (que obtiene el tamaño restante) o launidadespecialfr(fraction),quesimbolizaunafraccióndeespaciorestanteenelgrid.Veamosuncódigodeejemploenacción:
.grid{display:grid;grid-template-columns:1fr1fr;grid-template-rows:2fr1fr;}
Este nuevo ejemplo, se crea una cuadrícula de 2x2, donde el tamaño de ancho de lacuadrículasedivideendoscolumnas(mismotamañodeanchoparacadauna),yeltamañodealtodelacuadrículasedivideendosfilas,dondelaprimeraocuparáeldoble(2fr)quelasegunda(1fr).De esta forma, podemos tener unmejor control del espacio restante de la cuadrícula, ycomoutilizarlo.
![Page 36: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/36.jpg)
CSS
36
Propiedadesdelelementocontenedor
Filasycolumnasrepetitivas
En laspropiedadesgrid-template-columnsygrid-template-rowspodemosindicarexpresiones de repetición, indicando celdas que repiten un mismo patrón deceldas varias veces. La expresión a utilizar sería la siguiente: repeat([núm deveces],[valorovalores]).Veamosunejemplo:
.grid{display:grid;grid-template-columns:100pxrepeat(2,50px)200px;grid-template-rows:repeat(2,50px100px);}
Asumiendo que tuvieramos un contenedor grid con 8 ítems hijos (o más), elejemploanteriorcrearíaunacuadrículacon4columnas(laprimerade100pxdeancho,lasegundaytercerade50pxdeanchoylacuartade200pxdeancho).Porotro lado, tendría2 filas (laprimerade50pxdealto, y la segundade100pxdealto).Enelcasodetenermásítemshijos,elpatrónseseguiríarepitiendo.
![Page 37: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/37.jpg)
CSS
37
Gridporáreas
Mediante losgridsCSSesposible indicarelnombreyposiciónconcretadecadaárea de una cuadrícula. Para ello utilizaremos la propiedad grid-template-areas,dondedebemosespecificarelordendelasáreasenlacuadrícula.Posteriormente,en cada ítem hijo, utilizamos la propiedad grid-area para indicar el nombre deláreadelquesetrata:
.grid{display:grid;grid-template-areas:"headhead""menumain""footfoot";}.a{grid-area:head;background:blue}.b{grid-area:menu;background:red}.c{grid-area:main;background:green}.d{grid-area:foot;background:orange}
De esta forma, es muy sencillocrear una cuadrícula altamentepersonalizada en apenas unascuantas líneas de CSS, conmucha f lex ib i l idad en ladisposición y posición de cadaárea:
Propiedad Descripcióngrid-template-areas Indicaladisposicióndelasáreasenelgrid.Cadatextoentrecomillas
simbolizaunafila.grid-area Indicaelnombredelárea.Seusasobreítemshijosdelgrid.
![Page 38: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/38.jpg)
CSS
38
Gridporáreas
Aplicandoestecódigo,conseguiríamosunacuadrículadonde:
§ ElItem1,lacabecera(head),ocuparíatodalapartesuperior.§ El Item 2, el menú (menu), ocuparía el área izquierda de la cuadrícula,
debajodelacabecera.§ ElItem3,elcontenido(main),ocuparíaeláreaderechadelacuadrícula,
debajodelacabecera.§ El Item4,elpiedecuadrícula(foot),ocuparíatodalazonainferiorde la
cuadrícula.
![Page 39: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/39.jpg)
CSS
39
Gridporáreas
En la propiedad grid-template-areas, en lugar de indicar el nombre del área acolocar,tambiénpodemosindicarunapalabraclaveespecial:
§ La palabra clavenone: Indica que no se colocará ninguna celda en estaposición.
§ Uno o más puntos (.): Indica que se colocará una celda vacía en estaposición.
![Page 40: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/40.jpg)
CSS
40
Gridconhuecos
Pordefecto, lacuadrículatienetodassusceldaspegadasasusceldascontiguas.Aunqueseríaposibledarleunmargina las celdasdentrodel contenedor,existeuna formamás apropiada, que evita los problemas clásicos de los modelos decaja:loshuecos(gutters).
Para especificar los huecos (espacio entre celdas) podemos utilizar laspropiedadesgrid-column-gapy/ogrid-row-gap.Enellasindicaremoseltamañodedichoshuecos:
Propiedad Descripcióngrid-column-gap Estableceeltamañodeloshuecosentrecolumnas(líneasverticales).grid-row-gap Estableceeltamañodeloshuecosentrefilas(líneashorizontales).
![Page 41: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/41.jpg)
CSS
41
Gridconhuecos
Tomemoselejemploanterior comobase.Enél, le indicamosestaspropiedadesparacolocarhuecosentrelasceldasdelacuadrícula.Elcódigoaañadiralejemploanteriorseríaelsiguiente:
.grid{grid-column-gap:100px;grid-row-gap:10px;}
Con esto, obtendríamos unresultadocomoel siguiente,indicando huecos entrecolumnasde100pxyhuecosentrefilasde10px:
![Page 42: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/42.jpg)
CSS
42
Gridconhuecos
Atajo:GridconhuecosExisteunapropiedaddeatajopara laspropiedadesgrid-column-gapy grid-row-gapynotenerque indicarlasporseparado.Lapropiedadencuestiónseríagrid-gapyseutilizadelasiguienteforma:
.grid{/*grid-gap:<row-gap><column-gap>*/grid-gap:20px80px;/*grid-gap:<row-col-gap>*/grid-gap:40px;/*Equivalenteagrid-gap:40px40px;*/}
![Page 43: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/43.jpg)
CSS
43
Posicióndeloselementosenelgrid
Existen una serie de propiedades que se pueden utilizar para colocar los ítemsdentrodelacuadrícula.Conellaspodemosdistribuirloselementosdeunaformamuysencillaycómoda.Dichaspropiedadessonjustify-itemsyalign-items,queyaconocemosdeflexbox:
Propiedad Valores Descripciónjustify-items start|end|center|stretch Distribuyeloselementosenelejehorizontal.align-items start|end|center|stretch Distribuyeloselementosenelejevertical.
Estaspropiedadesseaplicansobreelelementocontenedorpadre,peroafectanalosítemshijos,porloqueactuansobreladistribucióndecadaunodeloshijos.Enel caso de que queramos que uno de los ítems hijos tengan una distribucióndiferentealresto,aplicamoslapropiedadjustify-selfoalign-selfsobreelítemhijoen cuestión, sobreescribiendo su distribución. Estas propiedades funcionanexactamenteigualquesusanálogasjustify-itemsoalign-items,sóloqueenlugarde indicarseenelelementopadrecontenedor, sehacesobreunelementohijo.Laspropiedadessobreítemshijoslasveremosmásadelante.
![Page 44: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/44.jpg)
CSS
44
Posicióndeloselementosenelgrid
También podemos utilizar las propiedades justify-content o align-content paramodificar la distribución de todo el contenido en su conjunto, y no sólo de losítemsporseparado:
Propiedad Valoresjustify-content start|end|center|stretch|space-around|space-between|space-evenlyalign-content start|end|center|stretch|space-around|space-between|space-evenly
De esta forma, podemos controlar prácticamente todos los aspectos deposicionamiento de la cuadrícula directamente desde los estilos CSS de sucontenedorpadre.
![Page 45: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/45.jpg)
CSS
45
Posicióndeloselementosenelgrid
![Page 46: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/46.jpg)
CSS
46
Ajusteautomáticodeceldas
Esposibleutilizar laspropiedadesgrid-auto-columnsygrid-auto-rowsparadarleun tamaño automático a las celdas de la cuadrícula. Para ello, sólo hay queespecificareltamañodeseadoencadaunadelaspropiedades.Además,tambiénpodemosutilizargrid-auto-flowparaindicarelflujodeelementosenlacuadrícula,yespecificarpordondeseiránañadiendo.Laspropiedadessonlassiguientes:
Propiedad Valores Descripcióngrid-auto-columns [tamaño] Indicaeltamañoautomáticodeanchoquetendrán
lascolumnas.grid-auto-rows [tamaño] Indicaeltamañoautomáticodealtoquetendrán
lasfilas.grid-auto-flow row|column|dense Utilizaunalgoritmodeautocolocación
(intentarellenarhuecos).
![Page 47: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/47.jpg)
CSS
47
Ajusteautomáticodeceldas
Un ejemplo de como se insertarían los elementos en una cuadrícula de 2x2utilizandogrid-auto-flowporcolumnasoporfilas:
![Page 48: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/48.jpg)
CSS
48
Ajusteautomáticodeceldas
Atajo:GridPor último, existe una propiedad grid que sirve de atajo para la mayoría depropiedades CSS relativas a cuadrículas. Su esquema de utilización sería elsiguiente,juntoaalgunosejemplos:
.grid{/*grid:<grid-template><grid-auto-flow><grid-auto-rows>/<grid-auto-columns>*//*EJEMPLOS*/grid:100px20px;grid:200pxrepeat(2,100px)300px;grid:row;grid:columndense;grid:row200px;grid:row400px/150px;}
![Page 49: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/49.jpg)
CSS
49
Propiedadesparaítemsgridhijos
Salvo algunas excepciones como justify-self, align-self o grid-area, hemos vistopropiedadesCSSqueseaplicansolamentealcontenedorpadredeunacuadrícula.Acontinuación,vamosaverciertaspropiedadesqueensulugar,seaplicanacadaítemhijodelacuadrícula,paraalterarocambiarelcomportamientoespecíficodedichoelemento,quenosecomportacomolamayoría.
Algunasdelaspropiedadesvistashastaahorasonlassiguientes:
Propiedad Descripciónjustify-self Alteralajustificacióndelítemhijoenelejehorizontal.align-self Alteralaalineacióndelítemhijoenelejevertical.grid-area Indicaunnombrealáreaespecificada,parasuutilizacióncongrid-template-areas.
Sin embargo, existen algunas propiedades más, referentes en este caso, a laposiciónde loshijosde lacuadrículadondevaacomenzaroterminarunafilaocolumna.Laspropiedadessonlassiguientes:
Propiedad Descripcióngrid-column-start Indicaenquecolumnaempezaráelítemdelacuadrícula.grid-column-end Indicaenquecolumnaterminaráelítemdelacuadrícula.grid-row-start Indicaenquefilaempezaráelítemdelacuadrícula.grid-row-end Indicaenquefilaterminaráelítemdelacuadrícula.
![Page 50: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/50.jpg)
CSS
50
Propiedadesparaítemsgridhijos
Condichaspropiedades,podemosindicarelsiguientecódigoCSSsobreelprimerítemdeunacuadrículade4ítems:
Deesta forma, tenemosuna cuadrículade4elementos, enel que indicamos laposicióndelítem1(elementoHTMLconclase.a):comenzandoenlacolumna1yacabandoeneliniciodelacolumna2:
.grid{display:grid;}.a{grid-column-start:1;grid-row-end:2;}
![Page 51: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/51.jpg)
CSS
51
Propiedadesparaítemsgridhijos
Eseseríaelfuncionamientonormal.Dondesevelautilidaddeestaspropiedades,essivariamos losvaloresde formaquetomenposicionesdiferentes,comoporejemplo,siindicamosqueelítem1debecomenzarenlacolumna1,peroacabarenlacolumna3(ocupandolahipotéticaprimeraysegundacelda):
![Page 52: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/52.jpg)
CSS
52
Propiedadesparaítemsgridhijos
En este nuevo ejemplo, comenzamos el primer ítem en la columna 2 y loacabamos al principio de la columna 3, por lo que la celda permanecerá en laposiciónde lasegundacolumna.Además,añadimos lapropiedadgrid-row-startquehacelomismoquehastaahora,peroconlasfilas.Enestecaso,leindicamosquecomienceenlafila3,porloqueelítem1sedesplazaaunanuevafiladelacuadrícula,dejandoenlaanteriorelítem4:
También es posible utilizar la palabra clave span seguida de un número, queindicaqueabarquehastaesacolumnaocelda.
![Page 53: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/53.jpg)
CSS
53
Propiedadesparaítemsgridhijos
Atajo:grid-columnygrid-rowElmódulogriddeCSSproporciona laspropiedadesdeatajogrid-columnygrid-row donde se nos permite escribir en un formato abreviado las propiedadesanteriores.Susintaxisseríalasiguiente:
.grid{display:grid;}.a{/*grid-column:<grid-column-start><grid-column-end>*//*grid-row:<grid-row-start><grid-row-end>*/grid-column:auto;grid-column:4/6;grid-column:span3;grid-column:span3/6;}
EjerciciosGridCSS:https://webdesign.tutsplus.com/es/tutorials/solving-problems-with-css-grid-and-flexbox-the-card-ui--cms-27468https://gridbyexample.com/examples/
![Page 54: CONSTRUCCIÓN DE PÁGINAS WEB - Mardeasamardeasa.es/descargas/curso-Confeccion-y-publicacion-de... · 2018. 10. 1. · CREACIÓN DE PÁGINAS WEB CON EL LENGUAJE DE MARCAS Flexbox](https://reader036.vdocuments.pub/reader036/viewer/2022062318/612e60c21ecc51586942c67c/html5/thumbnails/54.jpg)
CSS
54
BibliografíaFlexboxyGrid
*Todalainformacióndeestemanualhasidorecopiladadevariosartículospublicadoseninternet,destacando:https://lenguajecss.com/p/css/propiedades/grid-csshttps://lenguajecss.com/p/css/propiedades/flexboxhttps://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_FlexboxVideotutorialesRock'n'Grid-DianaAcevesWeCodeFest2018TallerdeFlexbox---DianaAceves