¿Qué vamos a ver en esta clase?

Llegó el momento de poner manos a la obra y comenzar a organizar la estructura de nuestros

documentos HTML para lograr una estética visual más funcional y organizada.
Para ello, presentamos el posicionamiento tipo Flexbox. Este nos permitirá generar un diseño
visual mucho más orgánico con un par de líneas de CSS.

Algunos de los temas que veremos a lo largo de esta clase serán:

Cómo arrancar a trabajar con Flexbox.
Qué es un contenedor flex y qué son los flex items.
Cómo configurar la estructura base de un contenedor flex.
Entendiendo los ejes: main y cross.
Organizando nuestra estructura en función de los ejes del contenedor flex.
Cómo trabajar individualmente con los ítems de un contenedor flex.
Sin duda, será una clase bastante interesante que nos abrirá a un mundo de diversas
posibilidades de organización visual.
 Introducción a Flexbox
Flexbox es, sin lugar a dudas, una de las mejores y más recientes características del lenguaje
CSS, pero ¿de qué trata?

Básicamente, Flexbox propone una manera de organizar los elementos presentes en nuestra
estructura de HTML. Esta manera busca ser mucho más orgánica y fluida, pensada en los
comportamientos naturales que posee cualquier elemento de la vida real con cuatros costados
(arriba, derecha, abajo, izquierda).

Si bien hoy en día existen diversas maneras de lograr un diseño visual armónico y estético,
Flexbox es una de las más elegidas. Su sencilla implementación la convierte en una excelente
herramienta para reorganizar la estructura de nuestros documentos HTML.

Aprendamos un poco más de qué trata esta sencilla, pero única, manera de generación de
diseños armónicos y fluidos.
 Ejes
¿Qué es un eje?

Si tuviéramos que definir esto en nuestra vida real, podríamos decir que un eje es aquella
representación imaginaria a partir de líneas que definen la dirección frente a la cual se desplaza
un elemento.

Con esto en mente, podemos decir, entonces, que los ejes dentro de un contenedor flex definen
la orientación a partir de la cual se desplazarán los elementos internos del mismo.

Un contenedor flex posee dos ejes: el eje principal, llamado también main axis, y el eje
transversal, llamado cross axis.

Algo particular dentro de este tipo de posicionamiento es que tanto el main axis y el cross axis
no están definidos ni por el plano horizontal ni por el plano vertical. Si no que todo dependerá
de la configuración que nosotros dispongamos al momento de escribir nuestro código.
 Ejes en Flexbox
Flexbox trabaja con dos ejes para desarrollar todo su flujo interno: el eje X y el eje Y. Según
cómo decidamos ordenar los elementos, llamaremos main axis a uno y cross axis al otro.

Cuando trabajamos en un flujo flex, hablamos del main axis y el cross axis. Definiendo el eje
principal de nuestro contenedor flex estamos determinando el flujo que tendrán los elementos
dentro del contenedor. En función de cuál es el eje principal, los elementos se distribuyen en
filas horizontales o en columnas verticales.
 flex-direction
Con esta propiedad definimos el main axis (eje principal) del contenedor, que puede ser tanto
horizontal como vertical. El cross axis (eje transversal) será la dirección perpendicular al main
axis.

flex-direction: row Los ítems se disponen en el eje x, de izquierda a derecha. Si no le aclaramos

la propiedad flex-direction al contenedor, row es el valor por defecto.
 flex-direction: row-reverse
Los ítems se disponen en el eje x, de derecha a izquierda. En este caso, estamos invirtiendo el
inicio y fin del main-axis.

flex-direction: column
Los ítems se disponen en el eje y, de arriba hacia abajo.
 flex-direction: column-reverse
Los ítems se disponen en el eje y, de abajo hacia arriba. En este caso, estamos invirtiendo el
inicio y fin del main-axis.
 Flexbox nos da dos propiedades para alinear fácilmente los elementos. A través del main axis
con justify-content. A través del cross axis con align-items.
justify-content
Con esta propiedad alineamos los ítems a lo largo del main axis. Si es horizontal, se alinearán en
función de la fila. Si es vertical, se alinearán en función de la columna.

justify-content: flex-start
Los ítems se alinean respecto del inicio del main axis que hayamos definido. Si no le aclaramos
el justify-content al contenedor, flex-start es el valor por defecto.
 justify-content: flex-end
Los ítems se alinean respecto del final del main axis que hayamos definido.

justify-content: center
Los ítems se alinean en el centro del main axis.
 justify-content: space-between
Los ítems se distribuyen de manera uniforme. El primer ítem será enviado al inicio del main axis,
y el último ítem, al final. El espacio libre se repartirá para separar los ítems.

justify-content: space-around
Los ítems se distribuyen de manera uniforme. El espacio libre disponible se repartirá entre todos
los elementos. Del espacio que le toque a cada elemento, la mitad irá a la derecha y la otra a la
izquierda (o arriba y abajo en caso de que sean columnas).
 align-items
Con esta propiedad alineamos los ítems a lo largo del cross axis. Si no aclaramos esta propiedad,
el valor por defecto es stretch, en otras palabras, los ítems ocuparán todo el espacio disponible
en el cross axis.

align-items: stretch
Los ítems se ajustan para abarcar todo el contenedor. Si el cross axis es vertical, se ajustan en
función de la columna. Si el cross axis es horizontal, se ajustan en función de la fila.
 align-items: flex-start
Los ítems se alinean al inicio del cross-axis.

align-items: flex-end
Los ítems se alinean al final del eje transversal.
 align-items: center
Los ítems se alinean al centro del eje transversal.
 Estructura básica de Flexbox
El posicionamiento de tipo flex posee una serie de configuraciones básicas que nos van a
permitir trabajar de una manera mucho más cómoda y práctica al momento de escribir nuestras
hojas de estilo CSS.

La estructura básica de un contenedor flex no es otra cosa más que todas aquellas líneas de CSS
que, sí o sí, deben estar presentes para que el diseño y estética visual buscado se pueda
implementar de la mejor manera posible.

Adentrémonos, entonces, en esa estructura básica que, de ahora en más, nos va a cambiar la
toma de decisiones cuando estemos escribiendo nuestras reglas de estilo.

Flexbox propone una estructura basada en el uso de un contenedor padre (Flex-container) y sus
elementos hijos (Flex-items).
 Trabajar con Flexbox
Para empezar a trabajar con Flexbox tenemos que definir un flex-container. Para eso usamos la
propiedad display con el valor flex. De esta forma, estamos habilitando un contexto flex, para
trabajar con los hijos directos del elemento. La propiedad display también puede recibir el valor
inline-flex.

Cuando hablamos de un flex-container, hablamos de un elemento HTML que contiene a uno o

más elementos. A estos elementos anidados los llamamos flex-items. En el flex-container es en
donde configuramos la mayoría de las propiedades flex.
 flex-wrap
Por defecto, los elementos hijos de un contenedor flex van a tratar de entrar todos en una
misma línea.

Para aclararle al contenedor que debe respetar el ancho definido de sus hijos usamos la
propiedad flex-wrap con el valor wrap.

Como dijimos, la propiedad flex-wrap con el valor wrap permitirá que los ítems tomen el ancho
definido y que los que no entren en la línea, caigan a la siguiente. flex-wrap también puede
recibir los valores nowrap y wrap-reverse.
 flex-items
Un flex-item, a su vez, puede convertirse en un flex-container. Para eso, solo hace falta asignarle
la regla display:flex, para que así sus elementos hijos pasen a ser flex-items.

Ítems
Cuando trabajamos con el posicionamiento Flexbox, generalmente todo lo implementamos
directamente en el elemento padre contenedor.

Pero ¿qué pasa si deseamos modificar el comportamiento de un flex item? ¿Es posible esto?

Claro que sí, CSS nos provee de un par de propiedades que nos van a permitir cambiar algunos
comportamientos por defecto y hacer que un ítem determinado rompa con las características
heredadas desde su contenedor padre.
 Flexbox nos da la posibilidad de aplicarle propiedades directamente a cada ítem para poder
manipularlos por separado y tener mayor control.
order
Con esta propiedad controlamos el orden de cada ítem, sin importar el orden original que
tengan en la estructura HTML. Esta propiedad recibe un número entero, positivo o negativo,
como valor. Por defecto, todos los ítems flex tienen un order: 0 implícito, aunque no se
especifique.

order: número positivo

Si le asignamos a la caja Q (que posee la clase caja-q) la propiedad order con valor 1, esta pasará
al final de la fila por ser el número más alto. Recordemos que, por defecto, el valor del orden de
cada ítem es 0.
 order: número negativo
Si ahora le asignamos a la caja D la propiedad order con un -1 como valor, esta pasará al
principio de la fila. Colocando al ítem con el orden más pequeño primero.

flex-grow
Con esta propiedad definimos cuánto puede llegar a crecer un ítem en caso de disponer de
espacio libre en el contenedor. Configura un crecimiento flexible para el elemento.
 flex-grow
Si ambos ítems tienen la propiedad flex-grow con valor 1, a medida que el contenedor se
agrande, irán abarcando el espacio disponible en partes iguales.

El número que le asignamos a flex-grow determina qué cantidad de espacio disponible dentro
del contenedor flexible tiene que ocupar ese ítem. 1 equivale al 100% del espacio disponible, y 0
al 0%. Podemos usar cualquier valor en el medio, como 0.25 para el 25%.
 align-self
Nos permite alinear, sobre el cross axis, a cada ítem al que le apliquemos esta propiedad,
independientemente de la alineación que se haya definido en el contenedor flex con align-
items.

Estas propiedades aplicarán para los flex-items siempre y cuando el contenedor padre sea un flex-container.