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

Al disminuir la resolución ( disminuir el tamaño del navegador en escritotio ) la altura de los elementos hijos se mantiene pero su ancho disminuye, 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;}