Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

5 técnicas de Flexbox que debes conocer

Flexbox es un estándar CSS optimizado para diseñar interfaces de usuario. Usando las diversas propiedades de flexbox podemos construir nuestra página a partir de pequeños bloques de construcción, que luego se posicionan y cambian de tamaño sin esfuerzo de la manera que queramos. Los sitios web y las aplicaciones creados de esta manera son receptivos y se adaptan bien a todos los tamaños de pantalla.
En este artículo, veremos cinco enfoques de flexbox para resolver problemas comunes de diseño de CSS. También hemos incluido ejemplos prácticos para mostrar escenarios de la vida real en los que se aplican estas técnicas.

1. Crear columnas de igual altura

Esto puede no parecer una tarea difícil al principio, pero hacer columnas que tengan la misma altura puede ser realmente molesto. Simplemente la configuración min-heightno funcionará, porque una vez que la cantidad de contenido en las columnas comience a diferir, algunas crecerán y otras se mantendrán más cortas.
Solucionar este problema usando flexbox no podría ser más fácil, ya que las columnas creadas de esta manera tienen alturas iguales por defecto. Todo lo que tenemos que hacer es inicializar el modelo flexible, luego asegurarnos de que las propiedades de dirección flexible y elementos de alineación tengan sus valores predeterminados.
CSS
HTML
.container {
         / * Inicializa el modelo flex * / 
    display : flex;

        / * Estos son los valores predeterminados, pero puede establecerlos de todos modos * / 
    flex-direction : row;    / * Los artículos dentro del contenedor se colocarán horizontalmente * / 
        align-items : stretch;   / * Los artículos dentro del contenedor ocuparán toda su altura * /
}
Para ver una demostración de esta técnica, puede dirigirse a nuestro artículo La forma más fácil de crear barras laterales de igual altura , en el que creamos una página receptiva con una barra lateral y una sección de contenido principal.
equal-height-sidebar.png
Barra lateral de igual altura con Flexbox

2. Reordenamiento de elementos

Hace un tiempo, si tuviéramos que cambiar dinámicamente el orden de algunos elementos, probablemente intentaríamos algún hack CSS, saldríamos frustrados y lo haríamos con JavaScript. Sin embargo, con flexbox, esta tarea se reduce a aplicar una sola propiedad CSS.
Se llama ordery, al igual que su nombre, todo lo más sencillo posible. Nos permite intercambiar cualquier cantidad de elementos flexibles y cambiar la secuencia en la que aparecen en la pantalla. Su único parámetro es un número entero que determina la posición de ese elemento: los números más bajos significan mayor prioridad.
CSS
HTML
.container {
     display : flex;
}

/ * Invierte el orden de los elementos * /

.blue {
     orden : 3 ;
}

.red {
     orden : 2 ;
}

.verde {
     orden : 1 ;
}
La propiedad de pedido tiene muchos usos prácticos. Si desea ver algunos de ellos, puede consultar este artículo , donde lo usamos para crear una sección de comentarios receptivos.
reorder.png
Sección de comentarios receptivos con Flexbox

3. Centrado horizontal y vertical

El centrado vertical en CSS es uno de esos problemas que nos hace preguntarnos: ¿cómo es tan trivial algo tan complicado de hacer ? Y realmente lo es. Si googleas CSS de centrado vertical, aparecerán infinitas técnicas diferentes, y la mayoría de ellas involucrarán tablas o transformaciones, cosas que no están diseñadas para hacer diseños.
Flexbox ofrece una solución más fácil al problema. Cada diseño flexible tiene dos direcciones (eje X y eje Y) y dos propiedades separadas para su alineación. Al centrar ambos, podemos colocar cualquier elemento en el medio de su contenedor principal.
CSS
HTML
.container {
     display : flex;

    / * Centro según el eje principal * / 
    justify-content : center;

    / * Centro de acuerdo con el eje secundario * / 
        align-items : centro;
}
Para ver esta técnica en acción y leer más sobre ella, puede consultar nuestro artículo de consejos rápidos sobre el mismo tema.
vertical-align-screen.png
Centrado horizontal y vertical con Flexbox

4. Crear cuadrículas totalmente receptivas

La mayoría de los desarrolladores confían en marcos CSS para crear cuadrículas receptivas. Bootstrap es el más popular, pero hay cientos de bibliotecas que pueden ayudarlo con esta tarea. Por lo general, funcionan bien y tienen muchas opciones, pero tienden a ser bastante pesadas. Si usted es una persona de bricolaje o no quiere implementar un marco completo solo para la cuadrícula, ¡flexbox lo tiene cubierto!
Una fila en la cuadrícula de flexbox es simplemente un contenedor con display:flexLas columnas horizontales en su interior pueden ser cualquier cantidad de elementos, estableciendo el tamaño de los cuales se realiza a través de flex . El modelo flexible se adapta al tamaño de la ventana gráfica, por lo que esta configuración debería verse bien en todos los dispositivos. Sin embargo, si decidimos que no hay suficiente espacio horizontal en la pantalla, podemos convertir fácilmente el diseño en uno vertical con una consulta de medios.
CSS
HTML
.container {
     display : flex;
}

/ * Clases para cada tamaño de columna. * /

.col-1 {
     flex : 1 ;
}

.col-2 {
     flex : 2 ;
}

@ media (ancho máximo: 800 px ) {
     .container {
         / * Convierta el diseño horizontal en uno vertical. * / 
        flex-direction : columna;     
    }
}
Puede consultar una variación de esta técnica en nuestra Sugerencia rápida La forma más fácil de hacer encabezados receptivos.
flexbox-header-screen.png
Encabezado receptivo con Flexbox

5. Crear el pie de página perfecto

Flexbox también tiene una solución fácil para ese problema. Al crear páginas que incluyen un pie de página adhesivo, al hacer todo en elementos flexibles podemos estar seguros de que nuestro pie de página siempre se mantendrá en la parte inferior de la página.
La aplicación display: flexa la etiqueta del cuerpo nos permite construir todo el diseño de la página utilizando las propiedades del modo flexible. Una vez hecho esto, el contenido principal del sitio web puede ser un elemento flexible y el pie de página otro, lo que hace que sea muy fácil manipular su posicionamiento y colocarlos exactamente donde queramos.
CSS
HTML
html {
     altura : 100% ;
}

cuerpo {
     display : flex;
    dirección flexible : columna;
    altura : 100% ;
}

.main {
    / * La sección principal ocupará todo el espacio libre disponible
      en la página que no está ocupada por el pie de página. * / 
   flex : 1  0 auto;
}

pie de página {
    / * El pie de página ocupará tanto espacio vertical como sea necesario y no un píxel más. * / 
   flex : 0  0 auto;
}
Puede encontrar más información sobre esta técnica en nuestro artículo La mejor manera de hacer pies adhesivos .
correct_layout.png
Pie de página adhesivo con Flexbox

Conclusión

Todos los navegadores convencionales ( excepto IE 9 ) ahora admiten el modo de diseño flexible, por lo que, a menos que tenga una base de usuarios que prefiera los navegadores retro de Microsoft, es seguro decir que flexbox está listo para la producción. Si aún no lo ha usado, le recomendamos que lo pruebe.
Esperamos que haya encontrado útiles nuestros consejos CSS y que lo ayuden a crear diseños receptivos mejores y más sólidos. ¡Disfrutar!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas