Guía práctica y visual sobre las propiedades básicas de Flexbox 🎨
Con la creación del módulo Flexbox, se busca mejorar el manejo de elementos en la web y en varios casos mobile. Entre las facilidades que otorga está mejorar el proceso de creación de los diseños responsive, ayudar a distribuir el espacio entre los ítems de una interfaz, y mejorar las capacidades de alineación evitando así el uso de float. Además todas las opciones anteriores traen consigo evitar la sobre-escritura de código y estilos.
Antes de Flexbox el posicionamiento de elementos resultaba enredado (de cierta manera), actualmente se pueden crear disposiciones de elementos sin tener noción del tamaño de éstos. Así mimo alterar el ancho, alto y posicionamiento de los elementos de la mejor manera con el espacio del que disponemos.
En este artículo hacemos un repaso rápido y práctico sobre las características principales.
FLEXBOX
TALK DE LA SEMANA
Cómo utilizar Flexbox?
Para empezar, Flexbox es una abreviatura de "Flexible Box Layout Module", un módulo CSS3 estandarizado por el World Wide Web Consortium, lo que quiere decir que los navegadores compatibles soportan Flexbox de forma nativa y que no tienes que instalar nada!
Para que tu contenedor sea flexible le asignaremos a la clase de este, la propiedad: display: flex. Pero, cómo y dónde lo hacemos? Te explicamos con un ejemplo: Primero, necesitaremos un archivo con html básico, y dentro de la etiqueta <body> agregamos:
<div class="container">
<div class="cantainer-flex">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>Y por otro lado, agregamos los estilos de esta estructura en el archivo style.css. Escribimos:
body {
background-color: aliceblue; //Color de fondo tipo azul muy claro
font-size: 40px; //Letra de 40px
}.container {
max-width: 800px; // Al contenedor le ponemos borde
margin: auto; // para poderlo visualizar mejor
border: black solid 4px;
}.container-flex { // Acá es donde agregamos nuestro
display: flex; // módulo Flexbox
margin: auto; // display: flex -> inline:block
}.child {
padding: 20px;
}.child:nth-child(1) { // Un color a cada caja para
background-color: yellow; // diferenciarlos
}.child:nth-child(2) {
background-color: blue;
}.child:nth-child(3) {
background-color: red;
}Resultado:
caja 1 | caja 2 | caja 3 | |
Una vez puedas ver en el navegador el diseño anterior, estamos listos para jugar con las propiedades de Flexbox, y así, a medida que avancemos, podremos ir visualizando los cambios.
Pero antes de empezar a utilizar Flexbox, es necesario conocer los conceptos y definiciones sobre los elementos de su esquema:
Contenedor Flex:
Es el elemento padre o principal que contendrá todos los elementos o ítems de modelo flexible. Por norma, en Flexbox siempre son agregadas las propiedades flexibles al elemento padre.
Ítem: Cada hijo o elemento flexibles que tendrá el contenedor padre en su interior. Los elementos dentro del contenedor flexible se denominan elementos flexibles.
Ejes:
En Flexbox existen dos ejes, uno es el eje principal y el otro, recibe muchos nombres eje cruzado, perpendicular, transversal o secundario. Se refieren solamente a tipos de orientaciones, porque si una es vertical, la será otra horizontal.
Eje Principal: Por defecto, los contenedores flex tienen un orientación horizontal (row).
Eje Cruzado: De la misma forma, su orientación secundaria siempre es perpendicular a la principal. Es decir, la secundaria será en vertical (column).
El detalle es que uno puede establecer cuál de los dos sentidos será para el eje principal. Por ejemplo, para definir el eje X (horizontal) como principal, usamos la propiedad flex-direction: row, y el eje cruzado siempre será perpendicular a este, es decir, el eje Y o vertical.
Revisa el siguiente ejemplo:
Si existe algún error en el reproductor, puedes ver el video en el siguiente LINK.
Propiedades
flex-direction
Mediante la propiedad flex-direction podemos modificar el sentido del eje principal del contenedor, es decir, para que sea en horizontal (por defecto) o vertical. Entre las opciones están:
row: Establece la dirección del eje principal en horizontal.
row-reverse: Dirección en horizontal, pero invertido (como de atrás pa lante).
column: Establece la dirección del eje principal en vertical.
column-reverse: Dirección del eje principal en vertical (desde abajo hacia arriba).
flex
Cuando implementamos display:flex al contenedor padre, se aplican muchas otras propiedades a los elementos dentro, por defecto encontramos por ejemplo:
.container-flex {
flex: 0 1 auto; // Valores por defecto Flex
}La idea es que tengamos claro qué sucede por debajo de todas estas propiedades, ya que las podemos ir gestionando o anulando conforme la marcha, además nos ayudará a conocer nuestros diseños y evitar que puedan volverse bastante confusos o difíciles de administrar.
Flex, es una propiedad de CSS abreviada, con ayuda de este comando se pueden establecer otras tres propiedades al mismo tiempo:
.container-flex {
flex: [flex-grow] [flex-shrink] [flex-basis];
// Valores del shortcut flex de tamaño máx, min e ideal
}En ese orden de ideas y según la pieza anterior de código, el primer valor flex será flex-grow al cual su valor predeterminado será 0. Y es razonable, porque nosotros no queremos que los elementos se expandan, sino que por defecto, cada elemento dependa del tamaño de su contenido. Ya lo explicaremos acontinuación.
flex-grow
Se usa para controlar el factor de crecimiento de los elementos flexibles, y consiste en estipular cuánto un item puede crecer de proporción relativa al resto de los ítems del mismo contenedor.
Donde se debe cumplir que: Si todos los ítems dentro del contenedor tienen el mismo factor de crecimiento, todos los elementos reciben la misma cantidad del espacio restante.
.child {
padding: 20px;
flex-grow: 1; // Cada elemento flex ocupa todo el
} // espacio restante del ejeEl código anterior le dice a la clase que comparte cada elemento flexible dentro del contenedor, que ocupe todo el espacio que queda para que entre todos se complete el 100% quedando cada uno con una parte igual de espacio:
caja 1 | caja 2 | caja 3 |
Asímismo, a cada elemento flexible también se le puede establecer el espacio para ocupar.
.child:nth-child(1) {
background-color: yellow;
flex-grow: 1; // Ocupará el mismo espacio disponible
} // que el resto de los elementos .child:nth-child(2) {
background-color: blue;
flex-grow: 2; // Ocupará el doble del espacio dispo-
} // nible que el resto de los elementos.child:nth-child(3) {
background-color: red;
flex-grow: 1;
}Quedaría algo así:
caja 1 | caja 2 | caja 3 |
Con este código le damos a todo el contendor un espacio de 1 y luego se le pide que divida ese espacio de 1 según lo especificado en el crecimiento flexible de cada uno de los elementos hasta que se ocupe todo el espacio del contenedor,
flex-shrink
En español es algo como "encoger" y se encarga de decirle al navegador cuál debe ser el tamaño mínimo del elemento.
Por ejemplo, en nuestro caso y según los valores por defecto de flex, el valor predeterminado de shrink es 1, que quiere decir que se debe "ocupar la misma cantidad de espacio en todo momento". Y si ese valor fuera 0, indicaría que "no se debe encojer en absoluto"
flex-basis
Y la última propiedad es mantener el tamaño ideal. Se agrega de 3er lugar por defeccto con valor auto, es decir, que puede "el alto o ancho será definido por su propio contenido" para hacer que todos los elementos ocupen todo el espacio del padre.
Podemos darnos cuenta que los valores de cada una de las propiedades influye sobre la otra, es por eso que se recomienda iniciar con el shortcut flex en primer lugar en lugar de intentar establecer los valores independientementes. Es cuestión de evitarnos el enredo.
Revisa la siguiente explicación:
Si existe algún error en el reproductor, puedes ver el video en el siguiente LINK.
Lo recomendable: siempre tratar de usar la abreviatura flex, recordar el tamaño máximo, mínimo e ideal al hacerlo y tener en cuenta que el contenido de un elemento afecta también a los 3 valores juntos.
¿Cómo alinear elementos?
Flexbox tiene dos propiedades que nos ayudan en la alineación de elementos dentro de un contenedor:
Justify (content/items): Establece alineación de ítems flexibles a lo largo del eje principal.
Align(items/self/content): Establece alineación de ítems flexibles en el eje cruzado.
Justify-content
Ayuda a distribuir el espacio libre sobrante cuando todos los elementos han alcanzado su tamaño máximo controlando la alineación de los elementos que se salen de la línea.
.container {
justify-content: flex-start | start | flex-end | end ;
}flex-start (predeterminado): Los ítems se ubican al inicio del contenedor flexible.
start: Hacia el inicio de la dirección: writing-mode.
flex-end: Los ítems se ubican hacial el final del contenedor flexible.
end: Hacia el final de la dirección: writing-mode.
left: Hacia el borde izquierdo del contenedor, a menos que exista error con el sentido flex.
right: Hacia el borde derecho del contenedor, si existe error con el sentido flex será: end.
.container {
justify-content: left | right | center | space-between | space-around | space-evenly ;
}center: Los ítems se ubicarán en el centro del eje principal:
space-between: El primer ítem está en el inicio, el último en el final, y el resto distribuidos de forma uniforme entre los dos:
space-around: Los ítems son distribuidos uniformemente tratando de mantener el mismo espacio entre ellos, sin embargo, el espacio del borde del contenedor para el primer y final ítem agregarán dos unidades de espacio, por lo que visualmente no serán iguales.
space-evenly: Los ítems se distribuyen de forma uniforme teniendo en cuenta el espacio hasta legar a los bordes, de modo que visualmente los espacios del contendor sean igual.
ⓘ Nota: space-between no lo soportan algunas versiones de edge y start/end/left/rigth aún no están en Chrome.
Si existe algún error en el reproductor, puedes ver el video en el siguiente LINK.
Justify-items
Permite alinear cada celda dentro del contenedor grid en una posición específica o un comportamiento específico.
.grid {
justify-items: auto | normal | stretch | baseline ;
}Continuemos con las propiedades de Flexbox, y algunos ejemplos en el Post: Flexbox Parte 2!
¡Gracias por leer!
📍 Conéctate con nosotros en instagram👇