Bueno, independientemente de los valores predeterminados del elemento, puedes cambiar esta propiedad configurando:

display: block
display: inline-block

Ahora, en tu lápiz de códigos, cambia el conjunto de reglas de .box para que todos los cuadros aparezcan uno al lado del otro.

Flexbox y cuadrícula

En cuanto a los tipos de visualización interna, tenemos un par de opciones más sobre cómo colocar las cosas. Podemos convertir nuestro elemento en una caja flexible o una cuadrícula, lo que afectará la forma en que se distribuyen sus elementos secundarios.

Pantalla: Flex

Cada uno de estos conceptos merece una publicación completa, pero básicamente, un cuadro flexible posicionará de manera "flexible" los elementos contenidos dentro de un elemento principal en línea. Flexbox se adapta mejor a diferentes tamaños de pantalla, ya que coloca los elementos entre sí y con el elemento contenedor en lugar de con respecto a la ventana.

Para ver esto en acción, echa un vistazo al conjunto de reglas .frame en Codepen.

Descomenta la siguiente línea de código:

display: flex;

Se ve muy similar a tener cuatro bloques en línea, ¿verdad? De forma predeterminada, un contenedor flexible justifica sus elementos al inicio del flexbox o a la izquierda, pero ¡esto también se puede cambiar!

Debajo de la declaración de flexbox, agregue esto:

justify-content: center;

¡Y ahora deberíamos ver aparecer todos los cuadros en el medio de la pantalla!

Pero, ¿qué pasa si no queremos que se queden atrapados en la cima de esa manera? Agreguemos también:

align-items: center;

¡Excelente!

Pantalla: Cuadrícula

Nota: antes de continuar en CodePen, asegúrese de comentar o eliminar las líneas que contienen display: flex y las propiedades justify-content o align-items que agregó.

¡Además del flexbox, también tenemos la opción de convertir todo nuestro elemento en una cuadrícula, donde podemos colocar elementos!

No entraré mucho en detalles de este código aquí, pero debes saber que es posible declarando que el elemento es una cuadrícula, proporcionando una plantilla de cuadrícula y luego colocando elementos dentro de la cuadrícula.

¡Descomenta las siguientes líneas en el conjunto de reglas .frame!

display: grid;  
  grid-template: 1fr 1fr / 1fr 1fr;
  align-items: center;
  justify-items: center;

¡Ahora deberías ver cada uno de los cuadros colocados cada uno en el centro de un cuadrante del marco!

¡Usa tus nuevas habilidades!

Al igual que en el artículo anterior, aquí hay una serie de desafíos. ¡Debes eliminar o volver a comentar las líneas de código que crean el diseño de la cuadrícula antes de intentarlo!

Desafío n.º 1: Busque en MDN la propiedad de justificación de contenido correcta para mostrar cada uno de los bloques de manera uniforme en el plano horizontal sin tocar los lados y en el centro verticalmente como se muestra a continuación.

Desafío n.º 2: Aún en un contenedor flexible, intenta agrupar todas las cajas y colocarlas en la esquina inferior derecha. (¿Qué propiedades tendrás que ajustar para esto?)

Reto #3: ¿Puedes encontrar una propiedad flexible que invierta el orden de visualización de los elementos?

¡Felicitaciones por completar estos desafíos! ¡Nos vemos la próxima semana para obtener más HTML y CSS!