¿De qué se trata?
Flexbox sirve para organizar y alinear elementos dentro de un contenedor de forma flexible y eficiente, especialmente cuando el diseño debe adaptarse a distintos tamaños de pantalla (diseño responsive).
______________________________________________
Explicación del código fuente base:
Consiste en un html y un css, en donde en el html se presenta un div contenedor (caja), y dentro del mismo varios div hijos.
El div contenedor tiene un ancho máximo de 800px pero se irá ajustando al 90% del viewport; también un alto mínimo de 600px, margen que lo centra y borde.
Los div hijos tienen color de letra, interlineado que ayuda al centrado vertical del texto, alineación horizontal centrada, color de fondo azul versoso, ancho y alto definido de 100px y borde,
Luego se aplica estilo específico a hijo3 e hijo4, esto modifica lo anterior para esos divs específicos.
Luego se aplica estilo específico a hijo3 e hijo4, esto modifica lo anterior para esos divs específicos.
Próximo paso: aplicar display: flex; al div contendero según el tp, e ir realizando las pruebas correspondientes.
La naturaleza del div es display: block; y ocupa un 100% de ancho de su contenedor, salvo en este caso que definimos un ancho de 100px, cada div inicia en una nueva línea; por lo tanto, se mostrarán naturalmente unos debajo de otros, hasta el momento de aplicar display: flex;
1) Display: block;
2) Display: flex;
Práctica:
____________________
flex-direction: se aplica al contenedor y permite los siguientes valores.
row (fila, por defecto)
row-reverse (fila con orden inverso de los elementos)
column (columna)
column-reverse (columnas con orden inverso de los elementos)
____________________
flex-wrap: wrap; permite que las cajas "hijos" se dispongan en más líneas, cuando no entran en una sola línea.
Los valores para flex-wrap son:
nowrap; Los elementos permanecen en una sola línea, sin envolver.
wrap; Los elementos se envuelven a la siguiente línea cuando no hay suficiente espacio.
wrap-reverse; Los elementos se envuelven, pero en orden inverso (de abajo hacia arriba).
____________________
flex-flow:
Propiedad que integra las anteriores:
flex-flow permite aplicar flex-direction más flex-wrap.
Ejemplo:
En vez de estas dos líneas:
flex-direction: row;
flex-wrap: wrap;
Escribir solo esta:
flex-flow: row wrap;
____________________
justify-content:
center; centrado
flex-end; al final
flex-start; (por defecto) desde el inicio.
space-between; sin espacio antes del primero ni después del último.
space-around; distribuye los elementos con un espacio igual antes y después de cada uno, pero los elementos en los extremos tendrán la mitad de espacio comparado con los elementos internos.
space-evenly; espacios iguales en todos los casos.
____________________
align-content:
Por defecto:
* Stretch funciona solo cuando los "hijos" no tienen un valor de alto definido.
También:
____________________
align-items:
flex-start; Alinea al principio del eje transversal.
flex-end; Alinea al final del eje transversal.
center; Alinea al centro del eje transversal.
baseline; Alinea según las líneas base de los elementos.
stretch; Estira los elementos para que ocupen todo el espacio disponible (valor por defecto).
______
align-self:
Para un elemento hijo en particular aplicariamos align-self con los valores anteriores.
Es decir, align-self para un elemento en particular (hijo), y align-items para el contendor y se lo aplica a todos los hijos.
____________________
order:
Para ordenar los elementos, se aplica individualmente.
Por defecto, order: 0; para todos los elementos.
Acepta números enteros, positivos o negativos, sin decimales (es decir, sin coma ni punto decimal). Puedes usar valores como: -2, -1, 0, 1, 2, etc.
