Flexbox es un nuevo módulo de diseño en CSS3 para mejorar la forma en que hacemos Responsive Design, evitando así el uso de float (No uses float para hacer responsive design). Gracias a FlexBox facilitamos la forma en que posicionamos elementos, es más simple y usamos menos código.
Para empezar a trabajar con FlexBox primero tienes que entender la estructura, FlexBox está constituido por un padre (Contenedor - Flex) y sus hijos (Elemento - Flex).
Contenedor - Flex: Es el elemento "padre" que contiene nuestros elementos "hijos", para definirlo se usa "flex" o "inline-flex" en la propiedad display.
Elemento - Flex: Estos son los elementos "hijos" que tendrán un comportamiento automático dependiendo lo que defina el elemento "padre".
Ejes: Cada diseño "FlexBox" está compuesto por dos ejes.
Eje principal: Es el eje que define la posición horizontal de los
elementos - Flex
Eje secundario: Es el eje que define la posición vertical de los elementos - Flex.
Direcciones: Las partes de inicio principal / fin principal e inicio secundario / fin secundario del Contenedor - Flex definen el origen y final del flujo de elementos - Flex.
Dimensiones: Esto equivale a la anchura (tamaño principal) y la altura (tamaño secundario) del elemento - Flex que dependen de eje principal y eje secundario.
Si no entendiste nada de lo que leíste, tranquilo no pasa nada, más adelante vienen los ejemplos.
Definiendo FlexBox
Para empezar a usar FlexBox solo tenemos que definir flex en la propiedad display del elemento padre:
HTML
<section class="padre">
</section>
CSS
.padre{
display: flex;
}
Esto es lo único que necesitamos para configurar el contenedor principal y automáticamente todos sus hijos se convertirán en elementos flex.
Propiedades del contenedor - flex (Padre)
El contenedor - flex (Padre) tiene una serie de propiedades interesantes con las cuales podemos ir empezando a trabajar.
flex-direction
Valor por defecto: row.
Esta propiedad define las direcciones del eje principal, es decir, hacia donde se moverán los Elementos - Flex, tanto horizontalmente como verticalmente.
Horizontalmente:
.padre {
flex-direction: row;
}
Los elementos - flex se apilan en una fila de izquierda a derecha.
.padre {
flex-direction: row-reverse;
}
Los elementos - flex se apilan en una fila de derecha a izquierda.
Verticalmente:
.padre {
flex-direction: column;
}
Los elementos - flex se apilan en una columna de arriba abajo.
.padre {
flex-direction: column-reverse;
}
Los elementos - flex se apilan en una columna de abajo arriba.
flex-wrap
Valor por defecto: nowrap.
Al manejar Flexbox el concepto inicial es fijar los elementos - flex en una sola línea, pero con la propiedad flex-wrap controlamos si el contenedor flex mueve sus elementos - flex en líneas individuales o múltiples, es una de las cosas más asombrosas de FlexBox, ya que con una simple línea de código nos ahorramos muchos problemas.
.padre {
flex-wrap: nowrap;
}
Los elementos - flex se muestran en una fila y se pueden encoger dependiendo de su contenedor - flex.
.padre {
flex-wrap: wrap;
}
Los elementos - flex se muestran en varias filas (si es necesario), de izquierda a derecha y de arriba abajo.
.padre {
flex-wrap: wrap-reverse;
}
Los elementos - flex se muestran en varias filas (si es necesario), de izquierda a derecha y de abajo arriba.
flex-flow
Valor por defecto: row nowrap.
Esta propiedad es una forma rápida para establecer las propiedades flex-direction y flex-wrap.
.padre {
flex-flow: <flex-direction> || <flex-wrap>;
}
Ejemplo:
.padre {
flex-flow: column-reverse wrap;
}
justify-content
Valor por defecto: flex-start.
La propiedad justify-content alinea los elementos - flex a lo largo del eje principal de la línea actual (contenedor - flex).
.padre {
justify-content: flex-start;
}
Los elementos - flex están alineados con el lado izquierdo del contenedor - flex.
.padre {
justify-content: flex-end;
}
Los elementos - flex están alineados con el lado derecho del contenedor - flex.
.padre {
justify-content: center;
}
Los elementos - flex están alineados al centro del contenedor - flex.
.padre {
justify-content: space-between;
}
Los elementos - flex tienen la misma distancia entre ellos, pero el primero y el último elemento - flex están alineados con los bordes del contenedor - flex.
.padre {
justify-content: space-around;
}
Los elementos - flex tienen la misma distancia entre ellos, incluso el primero y el último elemento - flex.
align-items
Valor por defecto: stretch.
La propiedad align-items es muy similar a la propiedad justify-content, pero este es en la dirección del eje secundario.
.padre {
align-items: stretch;
}
Los elementos - flex ocupan toda la altura (o anchura) de inicio secundario a fin secundario.
.padre {
align-items: flex-start;
}
Los elementos - flex se apilan al inicio secundario del contenido - flex.
.padre {
align-items: flex-end;
}
Los elementos - flex se apilan al fin secundario del contenido - flex.
.padre {
align-items: center;
}
Los elementos - flex se apilan al centro del eje secundario.
.padre {
align-items: baseline;
}
Los elementos - flex se alinean de manera que sus líneas base quedan iguales.
align-content
Valor por defecto: stretch.
La propiedad align-content alinea las líneas de un contenedor - flex cuando los elementos no utilizan todo el espacio disponible en el eje secundario.
.padre {
align-content: stretch;
}
Los elementos - flex se muestran con espacio distribuido después de cada fila de elementos - flex.
.padre {
align-content: flex-start;
}
Los elementos - flex se apilan hacia el inicio secundario del contenedor - flex.
.padre {
align-content: flex-end;
}
Los elementos - flex se apilan hacia el fin secundario del contenedor - flex.
.padre {
align-content: center;
}
Las filas se apilan en el centro del eje secundario.
.padre {
align-content: space-between;
}
Las filas de los elementos - flex tienen la misma separación entre ellos, pero la primera y última fila están alineadas con los bordes del contenedor - flex.
.padre {
align-content: space-around;
}
Los elementos - flex tienen la misma separación en cada fila de elementos - flex.
Esta propiedad solo funciona cuando el contenedor tiene varias líneas de elementos. Si solo existe una sola línea esta propiedad no tiene efecto.
Gracias a estas propiedades ya podemos crear cosas increíbles y fantásticas, ¡pero Hey!, eso no es todo, aún faltan más propiedades, solo que estas no son para el contenedor (Padre), si no, que estas aplican para los elementos (hijos).
Propiedades de los elementos - flex (Hijos)
Al igual que el contenedor - flex, los elementos - flex tienen propiedades interesantes, con las cuales podremos hacer cosas aun más increíbles.
order
Valor por defecto: 0.
Con esta propiedad controlamos el orden de los elementos - flex que están dentro del contenedor - flex.
.hijo {
order: <integer>;
}
Los elementos - flex pueden ser reordenados con esta simple propiedad sin la necesidad de reestructurar el código HTML.
flex-grow
Valor por defecto: 0.
Esta propiedad especifica el factor que determina hasta que punto un elemento - flex crecerá en relación con el resto de los elementos - flex.
.hijo {
flex-grow: <number>;
}
Si los elementos - flex tienen el mismo valor para flex-grow, todos van a tener el mismo tamaño, según el contenedor - flex.
Al definir que en el segundo elemento - flex la propiedad flex-grow va a tener un valor de dos, este va a tomar un ancho que equivale a la suma de dos elementos.
Los números negativos igual aplican para esta propiedad.
flex-shrink
Valor por defecto: 1.
Esta propiedad especifica cómo el elemento - flex se reducirá con respecto al resto de los elementos flexibles dentro del mismo contenedor.
.hijo{
flex-shrink: <number>;
}
Por defecto, todos lo elementos - flex se pueden reducir, pero si le ponemos el valor de 0 no se van a encoger, si no, que van a mantener el tamaño original.
Los números negativos igual aplican para esta propiedad.
flex-basis
Valor por defecto: auto.
Esta propiedad tiene los mismos valores que las propiedades width y height y especifica el tamaño principal del elemento - flex, distribuyéndose de acuerdo con los factores flex.
.hijo {
flex-basis: auto | <width>;
}
Aquí especificamos que el quinto elemento - flex dicta el tamaño inicial del elemento.
flex
Valor por defecto: 0 1 auto.
Con esta propiedad solo es la abreviatura de flex-grow, flex-shrink y flex-basis. Entre otros valores que también se pueden configurar para auto ( 1 1 auto ) y none ( 0 0 auto ).
.hijo {
flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}
align-self
Valor por defecto: auto.
Esta propiedad permite la alineación por defecto (o la especifica por align-items) para ser anulados por elementos - flex individuales.
.hijo {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
El tercer y quinto elemento - flex han anulado la alineación a través de la propiedad align-self.
float, clear y vertical-align no tienen efecto en un elemento.
¡Ahora a crear cosas increíbles!
Gracias a el conjunto de todas estas propiedades que acabas de aprender, puedes crear sitios responsivos de manera muy fácil y sin tener que darte golpes en la cabeza, el único límite es tu imaginación.
Te invito a que abras tu editor de texto y te pongas a probar el código, no importa si no te sale a la primera o si cometes errores, solo no dejes de intentarlo.