Flexible box layout
Flexbox
¿Para qué sirve?
Flexbox es una herramienta de modelado de layouts de una dimensión (1 axis, ya sea columnas o filas) que nos ayuda a alinear elementos, ordenarlos de forma lógica e implementar el acomodo de tamaños de manera más sencilla.
Jargon
Flex container => Parent element
Flex item => Child element
Definiendo la propiedad display flex
<container class="flex-container">
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
</container>HTML
.flex-container {
display: flex;
}CSS
Normal flow vs Flex flow
display: inline-flex
A diferencia de display flex, inline-flex hace que los flex items tomen el ancho total del contenedor y alinea todo junto (inline).
Axis
Flexbox alinea el contenido en relación a 2 axis, el main axis & el cross axis.
Rows
Columns
cross start
cross end
main start
main end
Flex direction
La dirección del main axis se fija con la propiedad flex-direction: row;
La dirección del cross axis se fija con la propiedad flex-direction: column;
left to right
top to bottom
flex-direction: row
flex-direction: column
bottom to top
flex-direction: row-reverse
Flex direction: column-reverse & row-reverse
cross axis
main axis
flex-direction: column-reverse
left to right
Flex wrap
La propiedad flex-wrap: nowrap; es la default.
La propiedad flex-wrap: wrap; permite que los elementos se contengan dentro de un contenedor.
La propiedad flex-wrap: wrap-reverse; los pone en reversa / main axis.
Flex flow
Es propiedad shorthand para definir 2 valores a la vez, ejemplo:
/* shorthand */
flex-flow: column wrap;
/* longhand */
flex-direction: column;
flex-wrap: wrap;Flex flow
Es propiedad shorthand para definir 2 valores a la vez, ejemplo:
/* shorthand */
flex-flow: column wrap;
/* longhand */
flex-direction: column;
flex-wrap: wrap;Flex properties
- flex basis: fija el valor inicial de los elementos flex
- flex-grow: determina como se van a expandir los elementos si existen espacio adicional en el contenedor
- flex-shrink: determina como se van a encojer los elementos si no hay espacion adicional en el contenedor
Ejercicio
Flexbox Froggy
- Completa hasta el nivel 12
Referencias