En la sexta clase del curso de Flexbox aprenderemos a modificar el tamaño de nuestros ítems flex en función de las necesidades del proyecto.
Uno de los aspectos más interesantes de flexbox, es que nos permite trabajar con los distintos elementos de un contenedor flex a nuestro antojo. Dentro de la multitud de modificaciones que podemos aplicarles, está la de variar su tamaño en función de aquello que queramos lograr.
Flexbox cuenta con una propiedad concreta que nos permitirá adaptar el tamaño de los ítems a voluntad, sin la necesidad de utilizar otro tipo de propiedades como width. ¡Vamos a verlo!
¡Ya lo tenemos! ¿Has visto qué fácil? Además, esta propiedad que veremos a continuación de integra perfectamente con otras dos que veremos en las próximas clases.
Con una sola línea de código, hemos modificado el tamaño de los ítem flex dentro de su contenedor, de tal forma que él mismo se adapte al viewport del que disponemos.
Además, hemos logrado que el espacio restante entre los diferentes elementos sea completamente homogéneo, dando como resultado un layout muy profesional. Os invitamos a que probéis a hacerlo vosotros, y si os "encalláis" en algún momento, recordad que tenéis el código de la clase listo debajo del vídeo :)
En la siguiente clase, la número 7, continuaremos avanzando en nuestro aprendizaje sobre flexbox. En esta ocasión, aprenderemos cómo gestionar el crecimiento de los distintos ítem flex. ¡Nos vemos en ella!
Todos los capítulos de este curso:
- Curso de Flexbox #1. Introducción
- Curso de Flexbox #2. Dirección
- Curso de Flexbox #3. Filas
- Curso de Flexbox #4. Alineación
- Curso de Flexbox #5. Orden
- Curso de Flexbox #6. Tamaño
- Curso de Flexbox #7. Factor de crecimiento
- Curso de Flexbox #8. Factor de decrecimiento
- Curso de Flexbox #9. Alineación particular
- Curso de Flexbox #10. Layout con Flexbox