Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Qué es FlexBox

Juan Diego Pérez Jiménez
  • Escrito por Juan Diego Pérez Jiménez el 11 de Marzo de 2019
  • 1 min de lectura | Diseño Web
Qué es FlexBox
El reproductor de video será cargado en breves instantes.

Te contamos qué es Flex, uno de los nuevos valores que ofrece HTML5 para ayudarnos a realizar una maquetación más potente y sencilla.

Qué es Flex

Flex es uno de los nuevos valores HTML5 para propiedad CSS display, que nos permite maquetar nuestras páginas web de una manera mucho más fácil de lo que se hacía con la forma tradicional, en la que utilizábamos propiedades como float o position, entre otras.

Por qué Flex

Se llama Flex porque tenemos un contenedor, llamado contenedor Flex, que es el elemento que contiene la propiedad display:flex.

Desde ese contenedor vamos a poder especificar la alineación de los elementos que hay dentro, el tamaño de los elementos que contienen y distribuir el espacio restante que hay entre los elementos del contenedor Flex, y todo esto en una sola dirección, ya sea una horizontal o vertical. Es decir, podemos distribuir los elementos que contiene la etiqueta sin poner nada dentro de esos elementos.

Flex a nivel visual

Vamos a ver dos ejemplos para ver cómo funciona de verdad:

flexbox

Ambos son contenedores Flex, el primero es un contenedor Flex a nivel horizontal que contiene tres elementos flexibles, el segundo es un contenedor Flex a nivel vertical que contiene tres elementos flexibles.

Únicamente dando propiedades al contenedor Flex podemos alinear todos los elementos que están dentro del mismo.

Aspectos a tener en cuenta

Hay ciertas cosas con las que tener cuidado, como por ejemplo que a día de hoy no todos los navegadores soportan contenedores Flex. Aunque es cierto que la gran mayoría de los navegadores que usamos diariamente ya lo soportan, no obstante hay que tener cuidado porque no todos los navegadores de los móviles lo soportan.

Incluso Twitter y su librería Bootstrap ya empieza a utilizar Flex, lo cual nos indica que ya es algo totalmente aceptado como estándar y que podemos utilizar está técnica con total tranquilidad para llegar a más del 90% de todos los dispositivos.

Si quieres aprender mucho más sobre Flexbox y CSS Grid, descarga esta Guía de Maquetación Web con Flexbox.

guia-flexbox

También puedes hacer el Curso de Flexbox y CSS Grid creado por nuestro profesor experto Juan Diego. Dónde aprenderás las técnicas para maquetar webs de una forma más fácil y profesional.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Qué es CSS3

Qué es CSS3

Desarrollo Web

20 de Enero de 2019

¿Te has parado a pensar que es lo que hace una Web se vea tan bonita? Para dar ese  aspecto a una página se utiliza CSS. Te contamos qué es CSS3, cubriendo qué es y dónde se usa en los si...

Frontend Developer Profesional

Frontend Developer Profesional

carrera

Incluye 8 cursos:

  • Curso de HTML5, CSS3 y JavaScript
  • Curso de Polymer
  • Curso de React JS

y 5 cursos más!

Duración: 52 horas y 11 minutos

Curso de HTML5, CSS3 y JavaScript

Curso de HTML5, CSS3 y JavaScript

curso

Aprende lo básico para comenzar a programar sitios o aplicaciones web. En este curso verás HTML5, CSS3 y JavaScript básico.

Duración: 7 horas y 9 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars