• Author / Uploaded
• Angelmessi10

Citation preview

Guía definitiva

para maquetar webs con

Flexbox

Índice de contenidos 1

Introducción Página 3

2

Propiedades de Flexbox Página 5

3

Propiedades para ordenador los elementos del Contenedor Página 13

4

Ejercicio práctico: Maquetando una web con flexbox Página 15

5

Conclusiones finales Página 25

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 flexdirection 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

1

3

2

2

3

1

row

1

2

3

row-reverse

3

Página 6

2

1

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 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.

Entre sus opciones encontramos:

.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

5

4

1

2

3

6

7

8

6

7

8

1

2

3

6

7

8

4

5

4

5

wrap;

wrap-reverse;

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: ; 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

2

1

center; space-between; space-around;

1

1

3

4

2

3

Página 9

4

5

5

3

2

1

2

3

4

4

5

5

Guía de Flexbox

2 Propiedades de Flexbox align-items En este caso la propiedad tiene un sentido parecido pues 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.

Destaca el valor stretch que aprovechará el máximo del espacio disponible entre otros valores como center, flexstart, flex-end y baseline.

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

center; 1 2

3

4

6

4

1

5

2

3

1

5

1 2

3

4 5

2

6

baseline;

3

stretch; 6

1 2

Página 10

3

4 5

6

4 5

6

2 Propiedades de Flexbox align-self

center;s

1

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

2

3

tretch;

4

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: ; /* 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: ; /* 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 los fundamentos de Flexbox, vamos a materializar todos los conocimientos adquiridos en un ejercicio práctico.

En esta ocasión, vamos a replicar un blog ficticio, OpenWebinars Business, un espacio en la plataforma 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 son más valiosos que ningún otro método para aprender: coge webs que te interesen y visualízalas con Flexbox y ponte a trabajar en ellas”.

“Conforme vayas haciendo páginas más complejas necesitarás otras soluciones que te permitirán seguir aprendiendo nuevos conceptos y técnicas”.

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 tenemos tanto el logo como los enlaces. Podríamos dejarlo tal cual, sin ningún contenedor más.

Aquí puedes ver una visión del blog de OpenWebinars Business y la organización teniendo en cuenta que vamos a usar sólo propiedades de Flexbox.

En nuestro caso vamos a añadir dentro del header dos . 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 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





Blog de recursos para CTOs y Recursos Humanos IT





Blog Cursos Pymes Corporaciones Solicitar Demo



Cúales son los profesionales IT más demandados en 2018

Diego Losada 10 septiembre, 2018



3 casos de éxitos de Employer Branding en Empresas IT

Marina Jiménez 7 septiembre, 2018





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 tiene una estructura muy sencilla. No es más que una fila en dispositivos con pantallas grandes y una columna en móviles.

Alineado: Como te hemos visto antes, los hijos estarán alineados a los extremos y en el caso del móvil al centro.

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 tiene una estructura muy sencilla. No es más que una fila en dispositivos con pantallas grandes y una columna en móviles.

Alineación: A nivel de Flexbox no hay mucho que alinear, puesto que no hay mucho espacio aunque sí que añadiremos padding para dejar un espacio, tal y como 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 su vez su segundo hijo también lo es (el apartado con la información del artículo). También es importante ese apartado con autor y fecha que es una fila.

Alineación: En el segundo hijo hemos aplicado un jusitfycontent:center;.

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