FLEXBOX / GRID
https://www.linkedin.com/in/guillermogarciadelrio/ guillermieres97@gmail.com
Guillermo García del Río / Ex-coder Factoría F5 Asturias
Flexbox
CSS Flexible Box Layout
Empezar
Índice
¿Qué es flexbox?
¿Para qué sirve?
Terminología básica
Propiedades básicas
Modelo de cajas flexible que optimiza el diseño responsive sin el uso de floats ni positions
El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación.
¿Para qué?
Nos permite realizar un layout sin floats ni positions
Optimiza el diseño de una interfaz de usuario
Facilita el diseño responsive (mobile-friendly)
MODELO UNIDIMENSIONAL
Properties:
Display: flex;
Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez , ya sea como fila o como columna.
FLEX-DIRECTION JUSTIFY-CONTENT ALIGN-ITEMS FLEX-WRAP ORDER...
El contenedor padre se convierte en una caja flexible, permite el ordenamiento y alineación flexible de todos sus elementos hijos.
es el eje a través del cual los elementos de disponen, se ordenan en el espacio. Depende de flex-direction (row o column).
EJE PRINCIPAL EJE CRUZADO
eje perpendicular al eje principal.
Grid
CSS Grid Layout
Empezar
Índice
¿Qué es grid?
¿Para qué sirve?
Terminología básica
Propiedades básicas
Display: grid;
Properties:
GRID-TEMPLATE-COLUMNS GRID-TEMPLATE-ROWS GRID-AREA GAP FR JUSTIFY-CONTENT ALIGN-CONTENT
El contenedor padre se convierte en un contenedor grid, permitiendo que sus elementos hijos se dispongan en un modelo de rejilla, de filas y columnas.
MODELO BIDIMENSIONAL
Cuando describimos a grid como bidimensional destacamos el hecho que grid maneja el layout en dos dimensiones, filas y columnas.
Las líneas verticales son las columnas y las líneas horizontales son las filas.
Herramientas y documentación
Flexbox gamificado: https://flexboxfroggy.com/#es
Flexbox docs: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Grid gamificado: https://cssgridgarden.com/#es
Grid docs: https://css-tricks.com/snippets/css/complete-guide-grid/
¡Gracias!
https://www.linkedin.com/in/guillermogarciadelrio/ guillermieres97@gmail.com
Guillermo García del Río / Ex-coder Factoría F5 Asturias
FLEXBOX_GRID
Guillermo García del Rio
Created on October 27, 2022
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Visual Presentation
View
Terrazzo Presentation
View
Colorful Presentation
View
Modular Structure Presentation
View
Chromatic Presentation
View
City Presentation
View
News Presentation
Explore all templates
Transcript
FLEXBOX / GRID
https://www.linkedin.com/in/guillermogarciadelrio/ guillermieres97@gmail.com
Guillermo García del Río / Ex-coder Factoría F5 Asturias
Flexbox
CSS Flexible Box Layout
Empezar
Índice
¿Qué es flexbox?
¿Para qué sirve?
Terminología básica
Propiedades básicas
Modelo de cajas flexible que optimiza el diseño responsive sin el uso de floats ni positions
El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación.
¿Para qué?
Nos permite realizar un layout sin floats ni positions
Optimiza el diseño de una interfaz de usuario
Facilita el diseño responsive (mobile-friendly)
MODELO UNIDIMENSIONAL
Properties:
Display: flex;
Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez , ya sea como fila o como columna.
FLEX-DIRECTION JUSTIFY-CONTENT ALIGN-ITEMS FLEX-WRAP ORDER...
El contenedor padre se convierte en una caja flexible, permite el ordenamiento y alineación flexible de todos sus elementos hijos.
es el eje a través del cual los elementos de disponen, se ordenan en el espacio. Depende de flex-direction (row o column).
EJE PRINCIPAL EJE CRUZADO
eje perpendicular al eje principal.
Grid
CSS Grid Layout
Empezar
Índice
¿Qué es grid?
¿Para qué sirve?
Terminología básica
Propiedades básicas
Display: grid;
Properties:
GRID-TEMPLATE-COLUMNS GRID-TEMPLATE-ROWS GRID-AREA GAP FR JUSTIFY-CONTENT ALIGN-CONTENT
El contenedor padre se convierte en un contenedor grid, permitiendo que sus elementos hijos se dispongan en un modelo de rejilla, de filas y columnas.
MODELO BIDIMENSIONAL
Cuando describimos a grid como bidimensional destacamos el hecho que grid maneja el layout en dos dimensiones, filas y columnas.
Las líneas verticales son las columnas y las líneas horizontales son las filas.
Herramientas y documentación
Flexbox gamificado: https://flexboxfroggy.com/#es
Flexbox docs: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Grid gamificado: https://cssgridgarden.com/#es
Grid docs: https://css-tricks.com/snippets/css/complete-guide-grid/
¡Gracias!
https://www.linkedin.com/in/guillermogarciadelrio/ guillermieres97@gmail.com
Guillermo García del Río / Ex-coder Factoría F5 Asturias