Advertisement
  1. Web Design
  2. CSS
Webdesign

Como Crear el Maquetado De Un Sitio de Noticias con Flexbox

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Final product image
What You'll Be Creating

No es necesario entender cada aspecto de Flexbox antes de que te decidas y empieces. En éste tutorial, vamos a presentar varias funcionalidades de Flexbox mientras diseñamos un "maquetado de noticias" como el que puedes encontrar en The Guardian.

La razón por la que usamos Flexbox es que proporciona características muy poderosas:

  • podemos fácilmente crear columnas responsivas (adaptables)
  • podemos crear columnas de igual altura
  • podemos poner contenido en la parte inferior de un contenedor

¡Asi que comencemos!

1. Comenzamos con Dos Columnas

Crear columnas en CSS siempre ha sido un desafío. Por un largo tiempo, las únicas opciones eran utilizar floats o tablas, pero presentaban sus inconvenientes.

Flexbox facilita el proceso, dándonos:

  • código más limpio: solo necesitamos un contenedor con display: flex
  • no necesitamos despejar los floats, evitando un comportamiento inesperado del maquetado
  • marcado semántico
  • flexibilidad: podemos redimensionar, estirar, alinear las columnas en unas cuantas líneas de CSS

Comencemos creando dos columnas; una que es de 2/3 de la anchura de nuestro contenedor, y uno que es de 1/3.

Hay dos elementos aquí:

  1. el contenedor columns
  2. Dos hijos column, uno con una clase adicional de main-column que usaremos para hacerla mas ancha

Como la columna principal tiene un valor flex de 2, ocupará el doble del espacio de la otra columna.

Al agregar algunos estilos visuales, esto es lo que tenemos:

2. Hacer Cada Columna un Contenedor Flexbox

Cada una de éstas dos columnas contendrán varios artículos apilados verticalmente, asi que también vamos a convertir los elementos column en contenedores Flexbox. Queremos:

  • que los artículos sean apilados verticalmente
  • que los artículos se estiren y llenen el espacio disponible

La regla flex-direction: column en el contenedor, combinada con la regla flex: 1 en los hijos asegura que los artículos llenarán el espacio vertical, manteniendo nuestras dos primeras columnas con la misma altura.

3. Haz Cada Artículo un Contenedor Flexbox

Ahora, para darnos control extra, convertimos también cada artículo en un contenedor Flexbox.  Cada uno de ellos contendrán:

  • un título
  • un párrafo
  • una barra de información con el autor y el número de comentarios
  • una imagen responsiva opcional

Estamos usando Flexbox aquí para "empujar" la barra de información al área inferior. Como recordatorio, éste es el maquetado de artículo que tenemos como objetivo:

Aquí está el código:

Los elementos del artículo están colocados verticalmente gracicas a la regla flex-direction: column;

Aplicamos flex: 1 al elemento article-content para que llene el espacio vacío, y "empuje" hacia el área inferior el article-info, no importa la altura de las columnas.

4. Agregar Columnas Anidadas

En la columna de la izquierda, lo que queremos es otro conjunto de columnas.  Asi que vamos a reubicar el segundo artículo con el mismo contenedor columns que ya hemos usado.

Como queremos que la primera columna anidada sea más ancha, agregaremos una clase nested-column con el estilo adicional:

Ésto hará que nuestra columna sea dos veces más ancha que la otra.

5. Dar al Primer Artículo un Maquetado Horizontal

El primer artículo es realmente grande. Para optimizar el uso del espacio, cambiemos su maquetado para que sea horizontal.

La propiedad order es muy útil aquí, pues nos permite alterar el orden de elemenetos HTML sin afectar el marcado HTML. El article-image realmente está antes del article-body en el marcado, pero se comportará como si estuviera después.

6. Hacer el Maquetado Responsivo

Esto se está viendo como queremos, aunque está un poco aplastado. Arreglemos eso al hacerlo responsivo.

Una gran característica de Flexbox es que necesitas solamente remover la regla display:flex en el contenedor para deshabilitar Flexbox completamente, mientras mantienes válidas las otras propiedades de Flexbox (como align-items o flex).

Como resultado, puedes generar un maquetado "responsivo" al habilitar Flexbox solamente arriba de cierto punto de quiebre.

Vamos a remover display: flex de ambos selectores .columns y .column, en lugar de encerrarlos en una media query:

¡Ya está! En pantallas más pequeñas, todos los artículos estarán uno arriba de otro. Arriba de 800px, se distribuirán en dos columnas.

7. Agregar Toques Finales

Para hacer el maquetado más atractivo en pantallas más grandes, agreguemos algunas modificaciones en el CSS:

El primer artículo tiene su contenido distribuído horizontalmente, con el texto a la izquierda y la imagen a la derecha. También, la columna principal es ahora más ancha (75%) y la columna anidada también (66%). ¡Éste es el resultado final!

Conclusión

¡Espero haber demostrado que no necesitas comprender cada aspecto de Flexbox para que te decidas y comiences a usarlo! Este maquetado de noticias responsivo es un patrón realmente útil; ¡fragméntalo, experimenta con él, déjanos saber como te fue!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.