logo

Aquí está la forma más fácil de crear barras laterales de igual altura

Durante mucho tiempo nos hemos visto obligados a crear las interfaces de nuestras aplicaciones web utilizando modos de diseño CSS que originalmente se diseñaron para colocar documentos. ¡No es de extrañar que sea tan doloroso para los principiantes! Afortunadamente, las cosas están cambiando:ahora tenemos el modo de diseño flexbox. Si puede permitirse el lujo de ignorar IE <10 (que es un gran si), ¡puedes usarlo hoy! La especificación está finalizada y la mayoría de los navegadores ya la admiten sin prefijo.

En este tutorial rápido, le mostraré cómo usar flexbox para crear algo básico que ha sido sorprendentemente complicado de hacer hasta ahora:una barra lateral que tiene la misma altura que su contenido principal. La parte complicada radica en que desea que tanto la barra lateral como el elemento de la página principal tengan contenido con diferentes longitudes, pero al mismo tiempo deben tener la misma altura. Con flex box, esto es muy fácil. Aquí está cómo hacerlo.

Saluda a Flexbox

Hay muchas guías para darle una visión general de flexbox. Aquí, adoptaremos un enfoque más práctico y comenzaremos a usarlo. Primero, aquí está el HTML:

<section id="page">

    <div id="main">
        <!-- The content of the page will go here -->
    </div>

    <aside>
        <!-- This is the sidebar -->
    </aside>

</section>

Queremos hacer el #main div y el aparte mostrarse uno al lado del otro, y ser de igual altura, independientemente del contenido que ostenten. También queremos que la página responda, de modo que la barra lateral tenga un ancho fijo, pero el elemento principal se encoja/expanda para llenar el espacio disponible. Por último, en pantallas pequeñas, queremos que la barra lateral esté debajo del contenido principal.

Aquí está cómo hacerlo. Primero, activaremos flexbox:

#page {
    display:flex;
}

Esto cambiará la #página elemento en un contenedor flexible. Se mostrará como un elemento de nivel de bloque (ocupará todo el ancho de la página) y convertirá todos los elementos dentro de él en elementos flexibles . Esta es la parte importante:queremos que nuestro contenido principal y la barra lateral sean elementos flexibles, de modo que ocupen toda la altura de la página.

Pero también queremos hacer la #página elemento de 1200px de ancho como máximo, y queremos que esté centrado. Sigue siendo un elemento de bloque normal, por lo que podemos centrarlo como tal:

#page {
    display:flex;

    /* Centering the page */
    max-width:1200px;
    margin:0 auto;
}

¡Perfecto! Ahora tenemos que darle anchos a #main y la barra lateral:

#main {
    /* This makes the element grow and take all available space, not taken by the sidebar */
    flex-grow:1;
}

aside {
    /* Give the sidebar a default width, and prevent it from shrinking */
    flex-shrink:0;
    width:280px;
}

¡Hecho! Nuestro diseño está casi terminado. Cuando el contenido de #main elemento hace que sea más largo, ampliará la #página , que a su vez también crecería al lado (y al revés). Lo último que debe hacer es hacer que la barra lateral se coloque debajo del contenido principal en pantallas pequeñas, lo que se puede hacer con una simple consulta de medios:

@media all and (max-width: 800px) {

    #page {
        flex-flow:column;
    }

    /* Make the sidebar take the entire width of the screen */

    aside {
        width:auto;
    }

}

Por defecto, los contenedores flexibles tienen un flex-flow valor de fila , que muestra elementos uno al lado del otro. En pantallas pequeñas, lo cambiamos a orientación vertical, lo que empuja la barra lateral debajo del contenido principal.

He omitido parte del CSS que no pertenece al diseño por razones de brevedad. Puede descargar el ejemplo completo desde el botón cerca de la parte superior de este artículo. Vale la pena mencionar que no he proporcionado alternativas para IE 10, que implementa una versión un poco más antigua de la especificación flexbox, por lo que solo funciona en Firefox, Chrome, Safari, Opera e IE 11.

¡Con esto nuestra barra lateral está lista!

Conclusión

Hay más para aprender sobre flexbox, pero espero que este artículo le brinde un comienzo rápido. Flexbox no es de ninguna manera la única forma de crear este diseño, pero es el camino a seguir para crear interfaces web. Si puede darse el lujo de abandonar el soporte para IE más antiguo, puede usarlo hoy.


No