Sección 7: CSS 3 avanzado
Lección 2: Flexbox
En esta lección desarrollaremos una galería de imágenes. Uno de los mayores problemas que tienen los desarrolladores con CSS es el de asegurarse siempre que los elementos se encuentran en la ubicación deseada. Existen muchas soluciones a este problema.
Una de las alternativas más populares actualmente es Flexbox.
Vamos a usar Flexbox para crear un hermoso sitio con imágenes. ¡Comencemos con este nuevo proyecto!
Vamos a crear dos archivos en un mismo directorio. Un archivo HTML llamado “index.html” y un archivo CSS llamado “style.css”.
Vamos a añadir la estructura básica de nuestro archivo HTML, ingresando la palabra “html” y luego presionando la tecla Tab.
Vamos a colocarle como título “CSS”.
En el “body” (cuerpo), vamos a colocarle un encabezado “h1” con el texto “Vida Salvaje”.
Vamos a definir un “div” y dentro de él una clase llamada “contenedor”.
Dentro del “div” vamos a añadir las siguientes 6 imágenes:
Vemos que nuestras imágenes se ven muy grandes, así que vamos a hacerlas un poco más pequeñas. Para ello, vamos a nuestro archivo “styles.css” y les damos un “width” (ancho) de 450 píxeles, y un “height” (alto) de 300 píxeles.
Y enlazamos nuestros archivos HTML y CSS, incorporando una etiqueta “link” en nuestro archivo “index.html”.
Guardamos nuestros archivos y recargamos la página.
Ahora vamos a aprender más sobre Flexbox gracias al sitio de CSS-Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox
Dentro de este sitio vamos a encontrar toda la documentación y ejemplos sobre Flexbox.
Este sitio muestra todas las cosas que podemos hacer con Flexbox.
Ahora probemos algunas de las propiedades de Flexbox. Queremos define que todo lo que está dentro del div es parte de Flexbox.
Para ello utilizaremos la clase que definimos con el nombre “contenedor”, y dentro de ella definiremos su propiedad “display” con el valor “flex”. De esta manera activamos Flexbox.
Ahora guardemos los cambios y recarguemos la página.
Vemos que ahora podemos ver las imágenes a través del desplazamiento horizontal en de página web. Pero lo ideal sería que podemos ver todas las imágenes sin tener que desplazarnos horizontalmente.
Para ello consultamos la guía mencionada anteriormente y encontramos en ella la propiedad “flex-wrap”.
Ahora vamos a incorporar la propiedad “flex-wrap” en nuestro archivo CSS y le demos el valor “wrap” (envolver).
Y si hacemos más grande a nuestra ventana veremos cómo las imágenes se acomodan en distintas filas de manera de quedar envueltas por toda la página.
Ahora coloquemos el contenido centrado. Para ello utilicemos la propiedad “justify-content” y le demos el valor “center” (centrado).
Como podemos ver en la guía, a la propiedad “justify-content” le podemos asignar diversos valores.
Ahora mejoremos un poco la apariencia de nuestra encabezado “h1”. Para ello añadiremos en nuestro archivo CSS un selector para “h1” y le asignaremos diversos valores a las propiedades “font-familiy”, “font-size”, “border-bottom” y “width”.
Ahora coloquemos también una línea derecha en el recuadro rosado, y centremos el texto del encabezado “h1” dentro de este recuadro. Para ello utilizaremos las propiedades “border-right” y “text-align”.
Ahora añadiremos un poco de espacio entre las imágenes. Para ello, en el selector de “img” añadiremos el atributo “margin” (margen) y le daremos un valor de 10 píxeles.
Como podemos ver, Flexbox es muy fácil de usar y hace que nuestros sitios se vean mucho mejor. Podemos posicionar de manera fácil nuestro contenido.
Veamos un último recurso de Flexbox. Es un juego llamado Flexbox Froggy (La rana de Flexbox): https://flexboxfroggy.com
El juego consiste en hacer llegar a la rana a la hoja.
En el primer reto tenemos que hacer llegar a la rana al costado derecho donde se encuentra la hoja. Para ello, debemos colocar el valor correcto a la propiedad “justify-content”.
Una vez terminado este podemos hacer click en el botón “Siguiente” para seguir resolviendo otros retos a través del uso de otras propiedades.
Bueno, eso es todo por esta lección.
Nos vemos en la siguiente.
¡Adios!