Escuche esta historia
--:--
8:36
Flexbox: un sistema para maquetar sitios web de forma sencilla
La maquetación web ha cambiado bastante en los últimos años y han aparecido herramientas que facilitan enormemente el trabajo. Anteriormente, los desarrolladores solían recurrir a tablas para poder maquetar un sitio web.
A pesar de que esto es algo que funcionaba, lo cierto es que era bastante limitado, especialmente porque no tenía nada de dinamismo. Luego, los desarrolladores empezaron a trabajar con floats y divs, lo que permitió hacer una gran cantidad de cosas.
Sin embargo, hoy en día hay dos nuevas alternativas, el Grid y Flexbox, lo que permite tener bloques dinámicos, ideales para el diseño responsivo. En el día de hoy hablaremos un poco más sobre lo que es esta herramienta y cómo funciona.
¿Qué es flexbox?
Se trata sencillamente de un sistema basado en CSS que permite generar elementos flexibles. Se trata de una nueva mecánica mucho más potente y limpia que los floats. Con flexbox se pueden llegar a hacer auténticas maravillas y se una manera realmente sencilla.
Este permite la creación de elementos en una sola dimensión y facilita enormemente el trabajo de maquetar un sitio web. Con este sistema, el tamaño de un sitio web es capaz de adaptarse de manera dinámica al ancho y alto de un sitio web.
Conceptos básicos de flexbox
Para poder manejar flexbox de una manera adecuada, es muy importante entender cuáles son los elementos básicos que lo conforman. Los 4 conceptos básicos para manejar esta funcionalidad son los siguientes:
Contenedor
El contenedor es el elemento principal de cualquier flexbox, este actúa como el elemento padre y en su interior se encuentran los items. El contenedor es el elemento que va a recibir las propiedades y que se aplicarán a los hijos, es decir, a los items.
Eje principal
El eje principal sirve para definir la orientación del contenedor, este se maneja en forma horizontal. Si lo comparamos con un plano cartesiano, este sería la X.
Eje secundario
El eje secundario es lo contrario, es decir, es la orientación de ese contenedor en forma vertical. Siguiendo el mismo ejemplo pasado, en el plano cartesiano este sería la Y.
Items
Los items son aquellos elementos que se encuentran dentro del contenedor. Todos estos son hijos del elemento padre y se ubican de la forma que se especifique en el contenedor.
Un item puede ser cualquier elemento, un div, un párrafo, un label, un spam o cualquier otro.
¿Cómo se inicializa un bloque flexible?
Para empezar a trabajar con flexbox, lo primero que debes hacer es aplicar la propiedad “display” al elemento. Al aplicarla, vas a poder especificar el valor de: “flex”. El código quedaría de la siguiente manera:
.contenedor { display: flex; }
Con esto, el contenedor se convierte en un flebox y vas a poder empezar a aplicar diferentes propiedades.
¿Cuáles son las principales propiedades que pueden aplicarse a un bloque flexible?
Existen varias propiedades que pueden aplicarse a los flexbox para darles su apariencia o definir su tamaño y orientación. A continuación te diré cuáles son las más comunes.
Flex-direction
Esta propiedad es la que permite cambiar la dirección en el eje principal, es decir, de manera horizontal y esta puede tener los siguientes valores:
row: Esta es la orientación por defecto y hace que los elementos se posicionen en forma horizontal de izquierda a derecha.
row-reverse: Este permite orientar el flexbox de forma horizonta, pero de derecha a izquierda. Es decir, es el contrario del row normal, los últimos elementos aparecen de primeros.
column: Este valor permite posicionar los elementos del contenedor en forma vertical, es decir de arriba hacia abajo.
column-reverse: Es el caso contrario del column, es decir permite organizar los elementos en el eje vertical. Sin embargo, los últimos elementos serán los primeros, ya que los ordena de reversa.
Flex-wrap
Esta es otra de las propiedades más importantes de un flexbox y lo que permite es indicar al contenedor si el contenido se ubicará en una sola línea o va a ser multilinea. Entre los valores que puede llegar a tener esta propiedad tenemos las siguientes:
nowrap: Esta es el valor por defecto de flex wrap y se caracteriza porque alinea todo el contenido en una sola línea. Cuando un elemento no quepa en el contenedor, este se saldrá del mismo.
wrap: Con el valor de wrap, el contenido del contenedor se convierte en multilínea. Es decir, se desborda hacia abajo cuando ya no tenga espacio de manera horizontal.
wrap-reverse: Este valor hace que el contenido se coloque en modo multilínea, pero de manera inversa. Es decir, los items se van colocando los más nuevos adelante y los más viejos se van desbordando hacia abajo.
Flex-flow
Esta es una propiedad que funciona como un atajo y en la cual se combina el flex-direction y el flex-wrap. Para utilizarlo se utiliza la siguiente sintáxis.
.contenedor { flex-flow: <direction> <wrap>; }
De esta manera, en el primer valor se establece uno de los valores del flex-direction, seguido del valor de flex-wrap. Funciona de la misma manera, solo que esta es una forma abreviada, ya que en vez de usar dos líneas, solo se utiliza una.
Justify-content
Con esta propiedad es posible alinear el contenido dentro del contenedor de manera horizontal. Es decir, en el eje principal y cuenta con los siguientes valores:
flex-start: Alinea lo items al inicio del contenedor.
flex-end: Alinea los items al final del contenedor.
center: Permite centrar los items con respecto al contenedor.
space-between: Se encarga de distribuír los items de tal manera que los separa maximizando el espacio entre ellos (no deja espacio en los bordes).
space-around: Distribuye los item dejando el mismo espacio entre ellos, incluyendo en los alrededores.
space-evenly: Hace lo mismo que space-around, pero solapandolos a la izquieda y derecha.
Align-content
Con esta propiedad se pueden alinear el contenido que está dentro del contenedor en el eje secundario (vertical). Este maneja las mismas propiedades que el justify-content, pero agrega una nueva que es la siguiente:
stretch: Permite estirar los items para que ocupen todo el espacio del contenedor (de arriba hacia abajo)
Align-self
Este también permite modificar el comportamiento y la alineación de cada uno de los items por separado en el eje secundario (vertical). Adicionalmente, cuenta con los mismos valores, salvo que en este caso se agregan dos nuevos, los cuales son los siguientes:
baseline: Permite alinear los items según la base del resto.
auto: Esta es la propiedad por defecto y hereda los valores del padre.
Align-items
Esta es una propiedad muy parecida a align-content, pero tienen algunas diferencias clave. En align-items actúa sobre la línea actual, es decir, en contenedores que solo manejan una línea. Por su parte, el align-content no tiene efectos sobre contendedores de una sola línea.
Gap
Esta es una propiedad nueva que permite establecer el tamaño de los espacios que hay entre los items. Es decir, esta maneja los tamaños de forma dinámica sin necesidad de utilizar margin o padding. Esta cuenta con dos propiedades principales que son los siguientes:
row-gap: Con esta se puede definir el espacio que habrá entre las filas. Para ello es necesario que se haya aplicado la propiedad de flex-direction: comun.
column-gap: Con esta propiedad es posible determinar el espacio entre las columnas cuando se haya establecido un flex-direction: row.
Debido a que es una propiedad bastante nueva, es posible que pueda dar algunos problemas en navegadores un tanto antiguos.
Order
Esta es una propiedad bastante útil y sirve para poder modificar el orden de cada uno de los items dentro del contenedor. Por defecto, el orden que se le agrega a los items es 0. Es decir, se ubican dependiendo de como se hayan colocado en el HTML.
Es una propiedad muy sencilla y, a menor sea el número que tengan, se ubicarán de primero. Es decir, si todos los items están por defecto (order: 0) y agregas un -1 a cualquiera de ellos, este se ubicará en el primer lugar.
La sintaxis para este es la siguiente:
.item1 { order: 1; }
Para que esta propiedad surta efecto, es necesario que el item se encuentre dentro de un contenedor flex.
