Modelo de Caja de Flexible CSS

Modelo de Diseño Flexbox CSS

Antes del Modelo de Diseño Flexbox, había cuatro modos de diseño:

• Bloque, para secciones en una página web.
• En línea, para texto.
• Tabla, para datos en tablas bidimensionales.
• Posicionado, para la posición explícita de un elemento

El modelo de diseño de caja flexible facilita el diseño de una estructura de diseño flexible y receptiva sin usar flotación o posicionamiento.

Contenedor Flexbox

Para comenzar a usar el Modelo Flexbox, primero se debe definir el contenedor Flexbox, que en el ejemplo a continuación, lo establecemos con display: flex; y establecemos el color de fondo en azul dodge para fines de visualizar el comportamiento.

Elementos Flexbox

Dentro del contenedor anidamos sus elementos, en nuestro caso elementos div al cual le establecemos sus propiedades: un tono gris claro, con margen, con relleno y el tamaño de letra, todo esto también para fines de visualización del comportamiento.

CSS:

.contenedor-flex {
  display: flex;
  background-color: DodgerBlue;
}
.contenedor-flex > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

HTML:

<div class="contenedor-flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Muestra: