Spanish (Español) translation by Javier Salesi (you can also view the original English article)
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.
1 |
<div class="columns"> |
2 |
<div class="column main-column"> |
3 |
2/3 column |
4 |
</div>
|
5 |
<div class="column"> |
6 |
1/3 column |
7 |
</div>
|
8 |
</div>
|
Hay dos elementos aquí:
- el contenedor
columns - Dos hijos
column, uno con una clase adicional demain-columnque usaremos para hacerla mas ancha
1 |
.columns { |
2 |
display: flex; |
3 |
}
|
4 |
|
5 |
.column { |
6 |
flex: 1; |
7 |
}
|
8 |
|
9 |
.main-column { |
10 |
flex: 2; |
11 |
}
|
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
1 |
.column { |
2 |
display: flex; |
3 |
flex-direction: column; /* Makes the articles stacked vertically */ |
4 |
}
|
5 |
|
6 |
.article { |
7 |
flex: 1; /* Stretches the articles to fill up the remaining space */ |
8 |
}
|
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:
1 |
<a class="article first-article"> |
2 |
<figure class="article-image"> |
3 |
<img src=""> |
4 |
</figure>
|
5 |
<div class="article-body"> |
6 |
<h2 class="article-title"> |
7 |
<!-- title -->
|
8 |
</h2>
|
9 |
<p class="article-content"> |
10 |
<!-- content -->
|
11 |
</p>
|
12 |
<footer class="article-info"> |
13 |
<!-- information -->
|
14 |
</footer>
|
15 |
</div>
|
16 |
</a>
|
1 |
.article { |
2 |
display: flex; |
3 |
flex-direction: column; |
4 |
}
|
5 |
|
6 |
.article-body { |
7 |
display: flex; |
8 |
flex: 1; |
9 |
flex-direction: column; |
10 |
}
|
11 |
|
12 |
.article-content { |
13 |
flex: 1; /* This will make the content fill up the remaining space, and thus push the information bar at the bottom */ |
14 |
}
|
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.
1 |
<div class="columns"> |
2 |
<div class="column nested-column"> |
3 |
<a class="article"> |
4 |
<!-- Article content -->
|
5 |
</a>
|
6 |
</div>
|
7 |
|
8 |
<div class="column"> |
9 |
<a class="article"> |
10 |
<!-- Article content -->
|
11 |
</a>
|
12 |
<a class="article"> |
13 |
<!-- Article content -->
|
14 |
</a>
|
15 |
<a class="article"> |
16 |
<!-- Article content -->
|
17 |
</a>
|
18 |
</div>
|
19 |
</div>
|
Como queremos que la primera columna anidada sea más ancha, agregaremos una clase nested-column con el estilo adicional:
1 |
.nested-column { |
2 |
flex: 2; |
3 |
}
|
É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.
1 |
.first-article { |
2 |
flex-direction: row; |
3 |
}
|
4 |
|
5 |
.first-article .article-body { |
6 |
flex: 1; |
7 |
}
|
8 |
|
9 |
.first-article .article-image { |
10 |
height: 300px; |
11 |
order: 2; |
12 |
padding-top: 0; |
13 |
width: 400px; |
14 |
}
|
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:
1 |
@media screen and (min-width: 800px) { |
2 |
.columns, |
3 |
.column { |
4 |
display: flex; |
5 |
}
|
6 |
}
|
¡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:
1 |
@media screen and (min-width: 1000px) { |
2 |
.first-article { |
3 |
flex-direction: row; |
4 |
}
|
5 |
|
6 |
.first-article .article-body { |
7 |
flex: 1; |
8 |
}
|
9 |
|
10 |
.first-article .article-image { |
11 |
height: 300px; |
12 |
order: 2; |
13 |
padding-top: 0; |
14 |
width: 400px; |
15 |
}
|
16 |
|
17 |
.main-column { |
18 |
flex: 3; |
19 |
}
|
20 |
|
21 |
.nested-column { |
22 |
flex: 2; |
23 |
}
|
24 |
}
|
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!
By
