El uso del Flexbox en el CSS3

/, Tips/El uso del Flexbox en el CSS3

El uso del Flexbox en el CSS3

A medida que la comunicación se globaliza, las exigencias en la elaboración de un contenido web más interesante y llamativo, hace que los desarrolladores se vean en la necesidad de ir mejorando e innovando con sus herramientas de trabajo. El lenguaje informático evoluciona para llenar las expectativas de los usuarios.

Uno de los lenguajes que ha tenido dicha evolución es el CSS (Cascading Style Sheets – Hojas de estilos en cascada), que es el encargado de proporcionarle a las páginas web escritas en HTML su apariencia, permitiendo así que se pueda definir el estilo que se quiere mostrar en cada dispositivo donde se visualice. En pocas palabras es el lenguaje que separa el contenido de la forma. Por lo que una página web puede cambiar totalmente a través del CSS haciéndola más llamativa visualmente, con efectos y sombreados; sin necesidad de alterar su contenido HTML.

Actualmente la versión que más se utiliza es el CSS3, la cual ha traído mejoras en la animación y en las transiciones de las páginas; con nuevos efectos de sombreado, creación de bordes, transformaciones de figuras y efectos 3D. Una de las propiedades más interesantes y versátiles del CSS3 es flexbox o la caja flexible, la cual nos permite ubicar los elementos de una página para que puedan adaptarse a diferentes tamaños de pantalla y diferentes dispositivos.

El flexbox es una mejora sobre el modelo de bloque al no ser limitado al uso del float. Esto permite que se pueda variar el ancho y alto de los elementos para ajustarse en forma óptima al espacio disponible en cualquier dispositivo. De ser necesario este expande sus elementos para llenar los espacios libres o los comprime para que no se pasen de lo previsto.

Para hacer uso del Flexbox es importante entender sus elementos:

  1. Contenedor flexible (Flex container) es el elemento padre que es el contenedor de cada uno de los ítems flexibles y adaptables.
  2. Elemento flexible (Flex item) son los hijos flexibles que tendrá el contenedor.
  3. El eje principal en el cual los contenedores flexibles adquirirán una orientación principal determinada. Suele ser por defecto la horizontal.
  4. El eje secundario en el cual los contenedores flexibles poseerán una orientación secundaria, perpendicular a la principal.

Para manejar la dirección de los ejes se utilizan dos propiedades: el flex-direction que es que cambia la orientación del eje principal y el flex-wrap que maneja la dirección del eje secundario para evitar que este se desborde.

Si deseas profundizar este interesante tema, visita el siguiente link, donde posees una guía completa:

A Complete Guide to Flexbox

By | 2017-11-15T15:26:21+00:00 noviembre 15th, 2017|Diseño, Tips|Sin comentarios

About the Author:

Alex Méndez Romero
Soy Ingeniero en Sistemas y escritor. Me fascina el desarrollo de aplicaciones móviles, tengo experiencia en ello desde el 2010 y en desarrollo de Software desde el 2004. Poseo más de 50 apps propias en Apple Store y múltiples proyectos como juegos, aplicaciones transaccionales, reskins, etc desarrollados para clientes de todo el mundo.

Deje su comentario