¿Qué es Flexbox?
Es un sistema de elementos flexibles. Donde los elementos HTML se adaptan y colocan automáticamente siendo mucho más fácil personalizar los diseños.
Está pensado para diseños en una sóla dimensión, es decir, o filas o columnas.
Antes de que existiese el Flexbox había otros modos de hacer layouts:
Block
Inline
Table
Position
El Flexbox hace que se más fácil crear estructuras de layout responsive, sin usar posicionamiento o flotantes.
En Flexbox tenemos...
Flex container: es el contenedor que contiene los elementos flexibles
Flex items: son los elementos flexibles dentro del flex container
Propiedades del elemento padre
Tenemos varias propiedades que podemos poner en nuestro flex container o elemento padre.
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction
La propiedad flex-direction define en qué dirección se distribuirán los elementos dentro del container. Tenemos los siguientes valores:
column
column-reverse
row
row-reverse
flex-wrap
La propiedad flex-wrap específica si los elementos pueden saltar a la siguiente fila/columna si es necesario.
flex-flow
La propiedad flex-flow es una combinación de las propiedades flex-direction y flex-wrap.
justify-content
Sirve para alinear el contenido.
align-items
La propiedad align-items se usa para alinear en vertical los elementos de un flex container.Tenemos varias opciones:
center
flex-start
flex-end
stretch
baseline
La propiedad align-content se usa para alinear las filas. Tenemos varias opciones:
space-between
space-around
stretch
center
flex-start
flex-end
El centrado perfecto
Elementos hijos
Automáticamente todos los elementos hijos del flex container se convierten en elementos flexibles.
Estos elementos tienen estas propiedades:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order
Especifica el orden de los elementos.
flex-grow
Determina cuánto “crece” un elemento relativo al resto de elementos.
flex-shrink
Determina cuánto se puede “encoger” un elemento respecto al resto de elementos.
flex-basis
Determina la longitud inicial del elemento
flex
Es una manera más corta de usar las propiedades flex-grow, flex-shrink y flex-basis
align-self
Es una manera más corta de usar las propiedades flex-grow, flex-shrink y flex-basis
Suscríbete a nuestra newsletter para seguir aprendiendo cosas nuevas de desarrollo cada día, ¡es gratis!
