Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Características Flexbox

Flexbox

Hola gente de EDteam...

...soy su amigo y docente digital Jonathan MirCha, y en esta ocasión quiero hablarles de las características más destacables que tiene Flexbox.

CSS ha recorrido un largo camino desde su introducción en 1996, pero las herramientas que tenemos disponibles para la maquetación no han cambiado mucho. La maquetación basada en tablas era muy rígida, los floats eran básicamente un truco que nos inventamos y los diseños basados ​​en posicionamiento absolutos y relativos eran poco adaptables, y ninguno podía manejar una gran cantidad de complejidad de manera eficiente.

El problema era que estos métodos no fueron creados para fines de maquetación. Las carencias de estos métodos se hicieron más evidentes con el diseño web responsivo donde la fluidez en la web es fundamental.

Con FlexBox y Grid, por fin tenemos herramientas eficientes y sin efectos secundarios destinadas específicamente a la maquetación. Tenemos nuevas posibilidades para viejos problemas, nos permiten hacer cosas que antes eran imposibles y resuelven problemas reales que enfrentamos con el diseño responsivo.

De Grid ya he tenido oportunidad de hablarles en otro artículo, en esta ocasión les hablaré de Flexbox, que nos da control de alineación que ningún otro método CSS puede producir: alinear, ordenar, y distribuir el espacio entre los elementos en un contenedor, o alterar la anchura y la altura de un elemento para rellenar mejor el espacio disponible.

Contenedores mejorados: en el diseño web responsivo, la anchura disponible varía según el ancho de la ventana, y esto puede conducir a resultados no deseado, especialmente cuando el contenido es más largo que su contenedor.

Flexbox resuelve este problema ya que nos permite aprovechar el espacio disponible y envolver el contenido cuando no lo es. Este comportamiento de auto-ajuste no sólo es conveniente, sino que mejora la mantenibilidad, ya no tenemos que depender de ajustes manuales.

Cuando se trata de espaciado y alineación en CSS, efectos que parecen triviales puede ser muy complicados de llevar a cabo como un simple centrado perfecto, la alineación vertical o el espaciado uniforme entre los elementos.

Flexbox resuelve esto, permitiendo la alineación y distribución del espacio (vertical y horizontal) entre un número desconocido de elementos dentro de un contenedor con valores de anchura y altura variables. Funciona como un software de diseño: Illustrator, Sketch, Fireworks, Photoshop, etc.

Disposición de los elementos: se refiere al orden en que se muestran los elementos en la página en función de como aparecen en el código HTML. Por defecto, los elementos se mostrarán de arriba a abajo y de izquierda a derecha.

El orden natural de los elementos es una guía para pensar en cómo se adaptará el diseño en diferentes anchuras, pero hay momentos en que es útil para modificarlo con el fin de reorganizar los elementos. La única manera de hacer esto antes de Flexbox era ocultar los elementos y mostrar otros, lo que resultaba en HTML duplicado, o confiar en el posicionamiento absoluto, que no siempre funciona cuando el contenido puede variar de tamaño. Con FlexBox, sólo hay que modificar el orden de los elementos flexibles sin la necesidad de modificar la estructura del HTML subyacente.

Recuerda que en EDteam, tenemos un Curso de CSS Avanzado donde te enseñamos a profundidad los conceptos de Grid y Flexbox y como combinarlos para lograr diseños espectaculares.

Se despide su amigo y docente digital Jonathan MirCha, sean felices, hasta siempre, nos leemos la próxima semana... ...bye ;)

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal