Flexbox es uno de los nuevos valores de html5 incluidos en CSS que nos permite colocar cajas de forma flexible, gracias a esta función podemos adaptar cajas a diferentes resoluciones y tamaños ya que actualmente existen una gran variedad de formatos de pantallas.
A continuación voy a hacer un ejemplo para explicarlo.
Creamos un nuevo HTML en VSCode que sea HTML5, un div con la clase «container» y dentro de éste colocamos diferentes div con algo de información dentro, para que la información esté dividida tal que así:
Después creamos un CSS para insertar los valores que queramos darle a las cajas. Para ello solo debemos linkear nuestro HTML5 con la hoja de estilos, para usar la función de FlexBox necesitamos la etiqueta display: flex en la clase «container» y le damos los valores que queramos a las cajas para mejorar su diseño.
El resultado sería este:
Como podemos observar, los div se ajustan automáticamente al tamaño de la página.