Juan Pablo De la torre Valdez
www.codigoconjuan.com
Flexbox
Introducción, direcciones y ejes
Flexbox fue diseñado
como un modelo
unidimensional para crear
layouts
www.codigoconjuan.com
Los 2 Ejes de Flexbox
En Flexbox solo puedes colocar y
distribuir tus elementos en una dirección
fi
la (row) o columna (column)
row es aplicado por default al de
fi
nir un display:
fl
ex;
Los otros valores son row-reverse, column y column-reverse
www.codigoconjuan.com
Si elegimos row o row-reverse los elementos hijos se
colocarán de izquierda a derecha uno junto al otro
www.codigoconjuan.com
Al elegir column o column-reverse los elementos se
colocarán de arriba hacia abajo.
www.codigoconjuan.com
Flexbox es especialmente
diseñado para alinear
elementos en tus
diseños.
www.codigoconjuan.com
No añade efectos de animación,
ni textos, es una tecnología
utilizada únicamente para los
layouts y sustituye a los
fl
oats o
table-cell
www.codigoconjuan.com

Más contenido relacionado

PDF
Manual de programación paginas web CSS-Flexbox-y-Grid.pdf
PDF
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
PPTX
Clase 10 Flexbox,grid,css,desarrollo web.pptx
PDF
Flexbox
PPTX
CSS: Flexbox & Grid
PPTX
Fullstack clase 6 - CSS 3 - flexbox.pptx
PPTX
ExpoItlalasamericasdelcaribe-2023-2-4.pptx
PDF
Keep calm and write CSS with Flexbox - Luz Maria Maida Claure (WTM - GDG - CBBA)
Manual de programación paginas web CSS-Flexbox-y-Grid.pdf
Estilos de cajas Flexibles CSS-Flexbox-y-Grid.pdf
Clase 10 Flexbox,grid,css,desarrollo web.pptx
Flexbox
CSS: Flexbox & Grid
Fullstack clase 6 - CSS 3 - flexbox.pptx
ExpoItlalasamericasdelcaribe-2023-2-4.pptx
Keep calm and write CSS with Flexbox - Luz Maria Maida Claure (WTM - GDG - CBBA)

Similar a 08-Flexbox.pdf (20)

PPTX
Clase 0 - Introducción a Javascript.pptx
PDF
0x08-CSS-flexbox.pdf
PDF
¿Qué es Flexbox y Como se Utiliza?
PPTX
Javascript + Angular Sesion 1
PPTX
Acti 04 Css con html5 para creacion de web.pptx
PDF
6. CSS - Unidades de medida, Box Modeling, Positions..pdf
PDF
flex en bootstrap
PDF
Programacion Web UGR - Tema 4.pdf
PDF
¿Cómo mantener tu javascript?: Buenas prácticas
PDF
Frameworks CSS
PDF
Introducción a los Frameworks CSS
PPTX
Presentacion de JavaScript sobre las mejores practicas
PDF
Responsive Web Design (Diseño Web Adaptable)
PDF
Diseño web clase03
PDF
Css - Tema 2
PDF
Front-end Basics for Developers
PDF
Crea tus layouts con flexbox - WordCamp Bilbao
PDF
introduccion_css.pdf
PPTX
boxmodel lupe
PPTX
HTML Tour - Responsive Web Design
Clase 0 - Introducción a Javascript.pptx
0x08-CSS-flexbox.pdf
¿Qué es Flexbox y Como se Utiliza?
Javascript + Angular Sesion 1
Acti 04 Css con html5 para creacion de web.pptx
6. CSS - Unidades de medida, Box Modeling, Positions..pdf
flex en bootstrap
Programacion Web UGR - Tema 4.pdf
¿Cómo mantener tu javascript?: Buenas prácticas
Frameworks CSS
Introducción a los Frameworks CSS
Presentacion de JavaScript sobre las mejores practicas
Responsive Web Design (Diseño Web Adaptable)
Diseño web clase03
Css - Tema 2
Front-end Basics for Developers
Crea tus layouts con flexbox - WordCamp Bilbao
introduccion_css.pdf
boxmodel lupe
HTML Tour - Responsive Web Design

Último (20)

PPTX
TRABAJOS DE ALTO RIESGO ELEC - LOTO.pptx
PDF
FUNCION CUADRATICA FUNCIONES RAIZ CUADRADA
PDF
Presentacion_Resolver_CEM_Hospitales_v2.pdf
PPTX
TOPOGRAFÍA - INGENIERÍA CIVIL - PRESENTACIÓN
PDF
Diseño y Utiliación del HVAC Aire Acondicionado
PPTX
MANEJO DE QUIMICOS Y SGA GRUPO Mnsr Aleman.pptx
PDF
Prevención de estrés laboral y Calidad de sueño - LA PROTECTORA.pdf
PDF
Módulo V. Tema 2. Disruptive & Transformation 2024 v.0.4.pdf
PPTX
PROCESOS DE REGULACION DE CRECIMIENTO.pptx
PPTX
CNE-Tx-ZyD_Comite_2020-12-02-Consolidado-Version-Final.pptx
PPTX
376060032-Diapositivas-de-Ingenieria-ESTRUCTURAL.pptx
PDF
manual-sostenibilidad-vivienda-yo-construyo (1).pdf
PPT
flujo de caja paa la evaluacion de proyectos
PDF
SISTEMAS DE PUESTA A TIERRA: Una introducción a los fundamentos de los sistem...
PDF
manual-sap-gratuito _ para induccion de inicio a SAP
PDF
Seguridad vial en carreteras mexico 2003.pdf
PPTX
Investigacioncientificaytecnologica.pptx
PDF
Matriz_Seguimiento_Estu_Consult_2024_ACT.pdf
PDF
Presentación Ejecutiva Minimalista Azul.pdf
PDF
EVALUACIÓN 1_REFERENCIAPIR_FASE 1_2024.pdf
TRABAJOS DE ALTO RIESGO ELEC - LOTO.pptx
FUNCION CUADRATICA FUNCIONES RAIZ CUADRADA
Presentacion_Resolver_CEM_Hospitales_v2.pdf
TOPOGRAFÍA - INGENIERÍA CIVIL - PRESENTACIÓN
Diseño y Utiliación del HVAC Aire Acondicionado
MANEJO DE QUIMICOS Y SGA GRUPO Mnsr Aleman.pptx
Prevención de estrés laboral y Calidad de sueño - LA PROTECTORA.pdf
Módulo V. Tema 2. Disruptive & Transformation 2024 v.0.4.pdf
PROCESOS DE REGULACION DE CRECIMIENTO.pptx
CNE-Tx-ZyD_Comite_2020-12-02-Consolidado-Version-Final.pptx
376060032-Diapositivas-de-Ingenieria-ESTRUCTURAL.pptx
manual-sostenibilidad-vivienda-yo-construyo (1).pdf
flujo de caja paa la evaluacion de proyectos
SISTEMAS DE PUESTA A TIERRA: Una introducción a los fundamentos de los sistem...
manual-sap-gratuito _ para induccion de inicio a SAP
Seguridad vial en carreteras mexico 2003.pdf
Investigacioncientificaytecnologica.pptx
Matriz_Seguimiento_Estu_Consult_2024_ACT.pdf
Presentación Ejecutiva Minimalista Azul.pdf
EVALUACIÓN 1_REFERENCIAPIR_FASE 1_2024.pdf

08-Flexbox.pdf

  • 1. Juan Pablo De la torre Valdez www.codigoconjuan.com Flexbox Introducción, direcciones y ejes
  • 2. Flexbox fue diseñado como un modelo unidimensional para crear layouts www.codigoconjuan.com
  • 3. Los 2 Ejes de Flexbox En Flexbox solo puedes colocar y distribuir tus elementos en una dirección fi la (row) o columna (column) row es aplicado por default al de fi nir un display: fl ex; Los otros valores son row-reverse, column y column-reverse www.codigoconjuan.com
  • 4. Si elegimos row o row-reverse los elementos hijos se colocarán de izquierda a derecha uno junto al otro www.codigoconjuan.com
  • 5. Al elegir column o column-reverse los elementos se colocarán de arriba hacia abajo. www.codigoconjuan.com
  • 6. Flexbox es especialmente diseñado para alinear elementos en tus diseños. www.codigoconjuan.com
  • 7. No añade efectos de animación, ni textos, es una tecnología utilizada únicamente para los layouts y sustituye a los fl oats o table-cell www.codigoconjuan.com