‘Unidad 2:’ {

Diseño de
Aplicaciones Web

}
1 CONTENIDOS DE LA CLASE {
2
3 DISEÑO WEB MODERNO, FLEXBOX Y GRID
4
5
6
7 Introducción a Flexbox y Grid y su función en el
8 Diseño Web Moderno
9
10
11
12
13
14 }
Argentina Programa 4.0
 UNIDAD 2 - Diseño de Aplicaciones Web

1
2
‘Diseño Web Moderno, Flexbox y Grid’ {
3
4
5
6
7 [1. Introducción a Flexbox y Grid y su
8 función en el ‘Diseño Web Moderno’ ]
9
10
11
12
13
14 }
Argentina Programa 4.0
Diseño Web Moderno, Flexbox y Grid UNIDAD 2 - Diseño de Aplicaciones Web

1 ¿Qué es Flexbox? {
2
3
4 < Flexbox (o Flexible Box Layout) es un modelo de diseño CSS
que permite crear diseños flexibles y adaptables a diferentes
5
tamaños de pantalla y dispositivos. Con Flexbox, puedes
6 controlar el tamaño, posición y orden de los elementos HTML en
7 un contenedor de manera más eficiente y con menos código que
8 con otras técnicas de diseño.
Flexbox es especialmente útil para crear diseños responsivos,
9
ya que los elementos se adaptan automáticamente al tamaño de la
10 pantalla del dispositivo en el que se están visualizando. >
11
12
13
14
}

Argentina Programa 4.0

Diseño Web Moderno, Flexbox y Grid UNIDAD 2 - Diseño de Aplicaciones Web

1 ¿Qué es Grid? {
2
< CSS Grid Layout (o simplemente Grid) es otro modelo de diseño
3 CSS que permite crear diseños complejos y sofisticados con
4 facilidad. A diferencia de Flexbox, que es más adecuado para
5 diseños unidimensionales (en una sola dirección), Grid te
6 permite crear diseños bidimensionales (en dos direcciones:
filas y columnas).
7
Grid es especialmente útil para diseños complejos que requieren
8 una gran cantidad de elementos y una estructura de rejilla
9 clara. También es ideal para diseños en los que los elementos
10 deben ajustarse a diferentes tamaños de pantalla, ya que puedes
especificar cómo se deben distribuir los elementos en la
11
cuadrícula en diferentes tamaños de pantalla. >
12
13
14
}

Argentina Programa 4.0

Diseño Web Moderno, Flexbox y Grid UNIDAD 2 - Diseño de Aplicaciones Web

1 Flexbox vs Grid {
2
3
4
5
6
7
8
9
10
11
12
13
14
}

Argentina Programa 4.0

Diseño Web Moderno, Flexbox y Grid UNIDAD 2 - Diseño de Aplicaciones Web

1 Ventajas de usar Flexbox y Grid Juntos {

2
3
4 01 Flexibilidad en la creacion de diseños
5 < La combinación de Flexbox y Grid permite crear diseños web muy
complejos y personalizados que se ajustan perfectamente a las
6
necesidades del proyecto. >
7
8 02 Capacidad de respuesta
< Ambas herramientas son muy efectivas para crear
9 diseños responsivos, ya que se adaptan fácilmente a
10 diferentes tamaños de pantalla y dispositivos. >
11
12
03 Control preciso de la posición y el
tamaño de los elementos
< Con Flexbox y Grid, se puede controlar la
13 posición y el tamaño de cada elemento en el
14 diseño de manera muy precisa, lo que permite
} lograr el resultado exacto que se busca. >

Argentina Programa 4.0

Diseño Web Moderno, Flexbox y Grid UNIDAD 2 - Diseño de Aplicaciones Web

1 Ventajas de usar Flexbox y Grid Juntos {

2
3
4 04 Reducción del código
5 < Al utilizar estas herramientas juntas, se puede reducir
6 significativamente la cantidad de código que se necesita para crear los
diseños. Esto hace que sea más fácil de mantener y actualizar el sitio
7
web. >
8
9
10 05 Compatibilidad con navegadores
11 < Flexbox y Grid son compatibles con la mayoría de los
12 navegadores modernos, lo que significa que se pueden
utilizar estas herramientas con confianza en el proyecto
13 sin preocuparse por la compatibilidad del navegador. >
14
}

Argentina Programa 4.0