Caja flexible de CSS
1
2
3
4
5
6
7
8
Módulo de diseño CSS Flexbox
Antes del módulo Flexbox Layout, había cuatro modos de diseño:
- Bloque, para secciones en una página web
- En línea, para texto
- Tabla, para datos de tablas bidimensionales
- Posicionado, para la posición explícita de un elemento
El módulo de diseño de caja flexible facilita el diseño de una estructura de diseño receptiva flexible sin usar flotación o posicionamiento.
Compatibilidad con navegador
Las propiedades de flexbox son compatibles con todos los navegadores modernos.
| 29.0 | 11.0 | 22.0 | 10 | 48 |
Elementos de caja flexible
Para comenzar a usar el modelo Flexbox, primero debe definir un contenedor flexible.
1
2
3
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>
Aprenderá más sobre contenedores flexibles y artículos flexibles en los próximos capítulos.