APRENDE CSS DE FORMA VISUAL

Comportamiento de flexbox anidados

Explicacion

Display block aplicado a div CLASE padre:

.divpadre1 {border: 5px solid black;background-color: lightcoral; display: block;}
.divhijo1{ border: 3px solid red; margin: 6px;}
#hijo11 {background-color: whitesmoke;}
#hijo21 {background-color: floralwhite;}
#hijo31 {background-color: skyblue;}

Display flex aplicado a div CLASE padre:

.divpadre2 {border: 5px solid black;background-color: lightcoral; display: flex;}
.divhijo2{ border: 3px solid red; margin:6px;}
#hijo12 {background-color: whitesmoke;}
#hijo22 {background-color: floralwhite;}
#hijo32 {background-color: skyblue;}

El ancho de las cajas se ajusta a su contenido:

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus temporibus architecto ut dolore, aliquam asperiores sit quod, facilis ducimus soluta enim est sunt dignissimos expedita unde consequuntur. A, libero doloribus. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quae inventore mollitia blanditiis, provident, impedit pariatur numquam animi maxime iste alias ipsam id tenetur? Perferendis laudantium minus porro sint odio cupiditate?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus temporibus architecto ut dolore, aliquam asperiores sit quod, facilis ducimus soluta enim est sunt dignissimos expedita unde consequuntur. A, libero doloribus.

Comportamiento de flexbox al definir height y width a los elementos hijos (cambia el tamaño del navegador para ver su función)

La altura de los elementos hijos se mantiene pero su ancho si puede disminuir, el width definido es el maximo width que pueden tener los flexbox.

.divpadre4 {border: 5px solid black;background-color: lightcoral;display: flex;}
.hijo4 { width:180px; height: 150px; background-color: blue; margin: 5px;}

FLEX-DIRECTION :

La propiedad flex-direction establece la dirección en la que se colocan los elementos flexibles dentro de un contenedor flexible. Puede tomar los siguientes valores: row, row-reverse, column, column-reverse

• row: Los elementos se colocan en una fila, de izquierda a derecha (valor predeterminado).
• row-reverse: Los elementos se colocan en una fila, pero en orden inverso, de derecha a izquierda.
• column: Los elementos se colocan en una columna, de arriba hacia abajo.
• column-reverse: Los elementos se colocan en una columna, pero en orden inverso, de abajo hacia arriba.

ROW (valor por defecto):
.divpadre5 {border: 5px solid black;background-color: lightcoral;display: flex; flex-direction: row;}
.hijo5 { display:flex ;justify-content: center;align-items: center; width:200px; height: 100px; background-color: rgb(138, 66, 183); margin: 5px;}

ROW-REVERSE:
.divpadre6 {border: 5px solid black;background-color: lightcoral;display: flex; flex-direction: row-reverse;}
.hijo6 { display:flex ;justify-content: center;align-items: center; width:200px; height: 100px; background-color: rgb(138, 66, 183); margin: 5px;}

FLEX-WRAP (cambia el tamaño del navegador para ver su función):
.divpadre7 {border: 5px solid black;background-color: lightcoral;display: flex; flex-wrap: wrap;}
.hijo7 { display:flex ;justify-content: center;align-items: center; width:200px; height: 100px; background-color: rgb(138, 66, 183); margin: 5px;}

FLEX-WRAP REVERSE (cambia el tamaño del navegador para ver su función):
.divpadre7 {border: 5px solid black;background-color: lightcoral;display: flex; flex-wrap: wrap-reverse;}
.hijo7 { display:flex ;justify-content: center;align-items: center; width:200px; height: 100px; background-color: rgb(138, 66, 183); margin: 5px;}

JUSTIFY-CONTENT:

Space-around: Distribuye el espacio de forma uniforme entre los elementos hijos.

Space-between: Distribuye el espacio de forma uniforme entre los elementos hijos, pero no deja espacio al principio ni al final del contenedor.

Space-evenly: Distribuye el espacio de forma uniforme entre los elementos hijos, dejando el mismo espacio al principio y al final del contenedor.