Guía definitiva

para maquetar webs con

Flexbox
Índice de
contenidos
1 Introducción
-
4 Ejercicio práctico: Maquetando
una web con flexbox
Página 3 -
Página 15

2 Propiedades de Flexbox
-
Página 5
5 Conclusiones finales
-
Página 25

3 Propiedades para ordenador

los elementos del Contenedor
-
Página 13
1 Introducción

Flexbox es una tecnología que

proviene de CSS3 con la que
tenemos acceso a un modelo de
cajas flexibles que nos permitirá
ordenar cualquier tipo de
contenedores.
Fue una tecnología propuesta por la W3C para facilitar
la labor del maquetado, tarea que estaba siendo cubierta
por frameworks como Bootstrap o Foundation ya que
los maquetadores se habían cansado de añadir float a
diestro y siniestro.

Una vez domines Flexbox serás capaz de construir casi

cualquier interfaz basándote en esta serie de comandos
que harán de tu contenido una caja flexible.

Con Flexbox desconectarás del Responsive Design en

gran parte ya que, al tener un modelo de caja flexible no
necesitarás hacer tantos cambios en los estilos si no que
el diseño será más flexible a todo tipo de dispositivos y
solo tendrás que hacer algún que otro cambio para que
tu sitio funcione perfectamente en cualquier resolución.

Finalmente, en términos de compatibilidad, la tecnología

de Flexbox es compatible con el navegador del 95% de
los usuarios de internet y es compatible al 100% y sin
ningún tipo de prefijo en las propiedades desde Firefox
28 y Chrome 29.

Página 3
Guía de
Flexbox
2 Propiedades de Flexbox

Uso básico de Flexbox Ejemplo

Flexbox, como ya hemos visto en la parte introductoria
está preparado para maquetar cualquier idea que
tengas en mente, gracias a unas pocas propiedades
conseguiremos crear una maqueta flexible ante
cualquier resolución y dispositivo.
Necesitamos maquetar una fila del blog de OpenWebinars,
para ello usaremos estas tres propiedades que hemos
mencionado que nos permitirán obtener una maquetación
lista para cualquier dispositivo.

Entre las propiedades más usadas encontramos display:

flex; que es la que hace Flexbox funcionar y flex-
direction así como flex-wrap.

Usa flexbox y coloca a los hijos en

una fila, que puede ir cayendo si
no hay espacio suficiente

.contenedor {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

Página 5
Guía de
Flexbox

2 Propiedades de Flexbox

Propiedades que sirven para alinear el contenedor

flex-direction
Esta propiedad nos ayuda a definir si el contenedor va a
desplegar a sus hijos como una columna o como una fila.
También contamos con otras dos opciones para mostrar
nuestra fila o columna de manera inversa a como está
establecida en el HTML.

.contenedor {
flex-direction: row | row-reverse | column | column-reverse;
}

Propiedad de Flexbox: flex-direction

column column-reverse row

1 3 1 2 3

2 2
row-reverse

3 1 3 2 1

Página 6
2 Propiedades de Flexbox

flex-wrap Sin duda nos ahorra parte de la lógica que necesitamos

para el Responsive Design.
flex-wrap es la propiedad que nos permitirá hacer
flexible el contenedor. Hemos visto en el ejemplo de Entre sus opciones encontramos:
maquetación del blog de OpenWebinars cómo gracias a
esta propiedad cuando el tamaño de la fila sea mayor al
del dispositivo sus hijos irán cayendo hasta formar una
columna.

.contenedor {
flex-wrap: wrap; /* El contenedor puede caer si lo necesita */
flex-wrap: nowrap; /* El contenedor NO puede caer */
flex-wrap: wrap-reverse; /* El contenedor puede caer pero en el
orden contrario */
}

nowrap; 1 2 3 4 5 6 7 8

1 2 3 4 5

wrap;
6 7 8

6 7 8

wrap-reverse;
1 2 3 4 5

Página 7
Guía de
Flexbox

2 Propiedades de Flexbox

flex-direction

Esta propiedad mágica nos permite englobar en una sola las dos propiedades de Flexbox que hemos explicado
anteriormente. Para ello deberemos de escribir como valor los valores de ambas propiedades en el siguiente orden:

flex-flow: <flex-direction> <flex-wrap>;

Siguiendo el ejemplo, para crear una fila que pueda llegar a convertirse en columna en dispositivos móviles usando la
propiedad flex-flow necesitaremos algo como lo siguiente:

flex-flow: row wrap;

1 2 3 4

1 2 3 4

Página 8
2 Propiedades de Flexbox

Propiedades para alinear los elementos
justify-content
Esta propiedad tan interesante nos ayudará a organizar
como queremos que los hijos del contenedor se
organicen, proveyéndonos de esquemas para organizar
a los hijos.
Entre las propiedades más destacadas encontramos
space-around y space-between que calculará el espacio
disponible después de colocar a los hijos y lo repartirá
a los lados y entre ellos respectivamente (todo esto
automáticamente, por si lo dudabas).
También podemos usar los valores flex-start, flex-end y
center aunque son más convencionales.

.contenedor {
justify-content: flex-start | flex-end | center | space-between |
space-around | space-evenly;
}

1 2 3 4 5

1 2 3 4 5

center; 1 2 3 4 5

space-between; 1 2 3 4 5

space-around; 1 2 3 4 5

Página 9
Guía de
Flexbox

2 Propiedades de Flexbox

align-items Destaca el valor stretch que aprovechará el máximo del

espacio disponible entre otros valores como center, flex-
En este caso la propiedad tiene un sentido parecido pues start, flex-end y baseline.
también nos ayudará a trabajar con el espacio restante y
con sus hijos con la diferencia de que considerará a todos
los hijos como un conjunto, al que procederá a alinear.

.contenedor {
align-items: stretch | flex-start | flex-end | center | baseline;
}

center;

1 3 4 6 1 4 1 4
3 6
2 5 2 3 5 6 2 5

baseline; stretch;

1 3 4 6 1 3 4 6

2 5 2 5

Página 10
2 Propiedades de Flexbox

align-self center;s tretch;

Funciona de la misma manera que la propiedad anterior, 1 4

con la diferencia de que esta afectará únicamente al hijo 3
que se indique y, en el caso de que el contenedor de
2
hijos tenga align-items en el hijo al que se le aplique esta
propiedad tendré preferencia sobre la mencionada.

flex-grow y flex-shrink

Estas dos propiedades están especializadas en el ancho de los hijos y son bastante especiales. En el caso de flex-grow
tenemos la opción de su comportamiento por defecto (0) o podemos definir un número (el que queramos) para el ancho
del hijo.

Los que tengan este mismo número se comportarán de la misma manera, pero por el contrario, si otro tiene un grow
mayor, su ancho lo será también. Es importante recalcar que el valor no es para definir si no para diferenciar.

.elemento {
flex-grow: <numero>; /* por defecto 0 */
}

Al contrario ocurrirá en flex-shrink con el que con el mismo funcionamiento, en vez de definir qué tanto se va a ensanchar
el hijo conseguiremos definir que tanto se va a estrechar este. Algo bastante importante para Responsive Design.

.item {
flex-shrink: <number>; /* default 1 */
}

Página 11
Guía de
Flexbox
3 Propiedades para ordenar los
elementos del Contenedor

order

Esta propiedad, que se describe a si sola, nos servirá para

definir en cada hijo que orden va a tener en el contenedor,
algo que necesitaremos si no queremos usar el orden que
se haya definido en nuestro documento HTML..

3 5 1 2 4
order: 1; order: 2; order: 3; order: 4; order: 5;

Página 13
Guía de
Flexbox
4 Ejercicio práctico: Maquetando
una web con Flexbox

Para finalizar con esta guía que nos ha llevado a aprender En esta ocasión, vamos a replicar un blog ficticio,
los fundamentos de Flexbox, vamos a materializar todos OpenWebinars Business, un espacio en la plataforma
los conocimientos adquiridos en un ejercicio práctico. dedicado a artículos sobre empleo y negocios en nuestro
sector.

Estructura del sitio:

división necesaria para organizar en Flexbox

“Este tipo de ejercicios prácticos “Conforme vayas haciendo

son más valiosos que ningún páginas más complejas nece-
otro método para aprender: sitarás otras soluciones que te
coge webs que te interesen y permitirán seguir aprendiendo
visualízalas con Flexbox y ponte nuevos conceptos y técnicas”.
a trabajar en ellas”.
En primer lugar, antes de crear nuestro HTML necesitamos organizar un poco la estructura.

Si alguna vez has visto la arquitectura por componentes esto te será muy fácil ya que prácticamente vamos a dividir la
página en secciones susceptibles de necesitar Flebox.

Por ejemplo, comencemos con el header.

Página 15
Guía de
Flexbox

4 Ejercicio práctico: Maquetando

una web con Flexbox

Efectivamente el header es un contenedor y en este Aquí puedes ver una visión del blog de OpenWebinars
tenemos tanto el logo como los enlaces. Podríamos Business y la organización teniendo en cuenta que
dejarlo tal cual, sin ningún contenedor más. vamos a usar sólo propiedades de Flexbox.

En nuestro caso vamos a añadir dentro del header dos
<div>. El sentido de esta división es que podamos decirle
a Flexbox que alinee los hijos del header a los extremos,
pero dentro de cada hijo,que serían estos <div> para
poder añadir otra organización.
Con respecto al HTML hemos preparado algo sencillo,
hay más formas de hacerlo, si se te ocurre como crearlo
por ti mismo, adelante.

Página 16
4 Ejercicio práctico: Maquetando
una web con Flexbox

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<link rel=”stylesheet” href=”./business.css”>
<title>Blog de recursos para CTOs y Recursos Humanos IT</title>
</head>
<body>
<header>
<div class=”logo-space”>
<img src=”https://business.openwebinars.net/blog/wp-content/uploads/2018/01/logo-openwe-
binars-horizontal-blanco-optimizado.svg” alt=””>
</div>
<div class=”menu-space”>
<a href=”#”>Blog</a>
<a href=”#”>Cursos</a>
<a href=”#”>Pymes</a>
<a href=”#”>Corporaciones</a>
<div class=”menu-btn”>Solicitar Demo</div>
</div>
</header>
<section>
<article>
<div class=”big-image”><img src=”https://business.openwebinars.net/blog/wp-content/
uploads/2018/09/profesionales-it-mas-demandados-destacada-768x512.jpg” alt=””></div>
<div class=”article-info”>
<h2 class=”article-info-title”>Cúales son los profesionales IT más demandados en
2018</h2>
<div class=”article-info-extra”>
<div class=”article-info-author”>Diego Losada</div>
<div class=”article-info-date”>10 septiembre, 2018</div>
</div>
</div>
</article>
<article>
<div class=”big-image”><img src=”https://business.openwebinars.net/blog/wp-content/
uploads/2018/08/3casos-exito-eb-destacada-768x512.jpg” alt=””></div>
<div class=”article-info”>
<h2 class=”article-info-title”>3 casos de éxitos de Employer Branding en Empresas
IT</h2>
<div class=”article-info-extra”>
<div class=”article-info-author”>Marina Jiménez</div>
<div class=”article-info-date”>7 septiembre, 2018</div>
</div>
</div>
</article>
</section>
</body>
</html>

Página 17
Guía de
Flexbox

4 Ejercicio práctico: Maquetando

una web con Flexbox

Construyendo el header

Estructura: Para proseguir con el header veremos que Alineado: Como te hemos visto antes, los hijos estarán
tiene una estructura muy sencilla. No es más que una fila alineados a los extremos y en el caso del móvil al centro.
en dispositivos con pantallas grandes y una columna en
móviles.

header {
background-color: #0f0d54;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
padding: 2rem;
}

header .logo-space {
margin-left: 2rem;
}

header .menu-space {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-right: 2rem;
}

header .menu-space a {
color: #fff;
font-size: 1rem;
font-weight: bold;
margin: .5rem 1rem 0 0;
text-decoration: none;
}

header .menu-space .menu-btn {

background: #ec5252;
border-radius: 3px;
color: #fff;
height: 30px;
padding: .5rem 0 0 1rem;
width: 120px;
}

header .logo-space img {

width: 150px;
}

Página 18
4 Ejercicio práctico: Maquetando
una web con Flexbox

Estamos diseñando la aplicación pensando primero en

desktop , si prefieres diseñar la aplicación pensando en
mobile-first tendrás que hacer lo contrario.

@media screen and (max-width: 480px) {

header {
flex-direction: column;
justify-content: center;
}
header .menu-space {
flex-direction: column;
margin: 0;
text-align: center;
}

header .menu-space a {
margin: .5rem 0 0 0;
}

header .menu-space .menu-btn {

margin: 1rem auto 0 auto;
text-align: left;
}

header .logo-space {
margin-left: 0;
}
}

Página 19
Guía de
Flexbox

4 Ejercicio práctico: Maquetando

una web con Flexbox

Construyendo la sección de artículos

Estructura: Para proseguir con el header veremos que Alineación: A nivel de Flexbox no hay mucho que
tiene una estructura muy sencilla. No es más que una fila alinear, puesto que no hay mucho espacio aunque sí que
en dispositivos con pantallas grandes y una columna en añadiremos padding para dejar un espacio, tal y como
móviles. aparece en el diseño en el que nos estamos basando.

section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 4rem;
}

Página 20
4 Ejercicio práctico: Maquetando
una web con Flexbox

En dispositivos móviles hemos reducido este padding para dejar más espacio al contenedor del artículo:

section {
padding: 4rem 1rem;
}

Preparando cada artículo

Estructura: Como puedes apreciar es una columna, y a Alineación: En el segundo hijo hemos aplicado un jusitfy-
su vez su segundo hijo también lo es (el apartado con content:center;.
la información del artículo). También es importante ese
apartado con autor y fecha que es una fila.

Página 21
Guía de
Flexbox

4 Ejercicio práctico: Maquetando

una web con Flexbox

article {
border: 1px solid #dbdbdb;
box-shadow: 3px 0px 51px -5px rgba(0,0,0,0.36);
margin: 1rem;
max-width: 100%;
text-align: center;
width: 540px;
}

article .big-image img {

max-width: 100%;
width: 540px;
}

.article-info {
padding: 1rem;
}

.article-info .article-info-title {
font-weight: 400;
padding: 0 1rem;
}

.article-info .article-info-extra {
color: #556677;
font-size: 0.75rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}

.article-info .article-info-author {
margin-right: 1rem;
}

Página 22
4 Ejercicio práctico: Maquetando
una web con Flexbox

Y en este caso no tenemos ninguna adaptación para dispositivos móviles. Como te comenté y si te fijas solo hemos
realizado cambios mínimos, la mayoría de factores ajenos a Flexbox o para cambiar su estructura (fila o columna y
viceversa).

Página 23
Guía de
Flexbox
4 Conclusiones finales
Tienes accesible el código usado
durante el ejercicio de maquetación
a través de este enlace.
https://flexbox-opbusiness.now.sh/
Flexbox nos permite diseñar de una manera modular y
flexible cualquier proyecto que tengamos en mente. Nos
reduce la cantidad de adaptaciones para dispositivos
móviles, pues, su diseño flexible ayuda mucho en esta
tarea.
Flexbox a día de hoy es un estándar de la industria, bien
soportado por los navegadores y que está para ayudarte
a trabajar más rápido. Sólo te queda aprovecharlo.
Página 25
 ¿Quieres convertirte en
Frontend Developer Profesional?
Aprende ahora con los mejores expertos
CARRERA
FRONTEND DEVELOPER WEB

Comenzar Carrera Ahora

¡Si te ha resultado útil,

comparte en redes sociales!

Más en openwebinars.net