CSS Flexbox

Módulo de diseño CSS Flexbox

Antes del módulo Flexbox Layout, había cuatro modos de diseñar:

• Bloque, para secciones en una página web

• En línea, para texto

• Tabla, para datos de tablas bidimensionales

• Posicionamiento, para la posición explícita de un elemento

El módulo de diseño Flexbox CSS facilita el diseño de una estructura de diseño responsive flexible sin usar float o position.

Compatibilidad con el navegador

Las propiedades de flexbox son compatibles con todos los navegadores modernos.

Elementos CSS Flexbox

Para comenzar a usar el modelo Flexbox, primero debes definir un contenedor flexible.

El elemento de arriba representa un contenedor flexible (el área azul) con tres elementos flexibles.

Ejemplo:

Un contenedor flexible con tres elementos flexibles:

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

Ver ejemplo

Aprenderás más sobre contenedores flexibles y artículos flexibles en los próximos capítulos.

Traducido con 💚 desde W3Schools.com