Display Flex

.container{
border: 0.3rem solid black;
display: flex; /*este display flex coloca todos los cuadros de forma horizontal*/
}

flex-wrap: wrap; /*se utiliza para cuando se reduce la pantalla se pueda bajar los cuadros uno debajo del otro de forma automatica */
justify-content: center; /*se utiliza para centrar, y si se mescla con fñex-wrao: wrap lo centra todo y cuando se redusca la pantalla se sigue centrando los cuadros*/

justify-content: space-evenly; se utiliza para dar los espacios entre los cuadros del mismo tamaño

align-items: center; se utliza para centrar todos los cuadros en el centro del cuadrado

align-items: stretch; se utiliza para que todos lo cuadros lleguen hasta el fondo y se debe eliminar el /* height: 10rem; */ que esta dentro de box

.box {
width: 10rem;
/* height: 10rem; */
}

align-items: baseline; se utiliza para tome el mismo tamaño del contenetor igual eliminando height de .box

flex-grow: 2; se utiliza para que la caja 1 y 2 cresca el tamaño y ocupe todos los espacio que qyuedan libre en la pantalla hacia los lados