Índice

Maquetación flexible

El módulo CSS Flexible Box Layout Module Level 1 está prácticamente finalizado, pues se encuentra en estado Candidate Recommendation a 1 de marzo de 2016. Este módulo se reconoce perfectamente en los navegadores modernos, a excepción de MS Internet Explorer 11, que solo lo reconoce parcialmente. He aquí la tabla de compatibilidad de Can I use:

images/C13-012.png

Este módulo nos va a permitir crear maquetaciones con columnas de manera muy sencilla. El principal uso de las cajas flexibles es el siguiente: basta con definir un contenedor padre como caja flexible para que todos sus elementos hijos adopten su comportamiento. A continuación, para cada caja hijo, podremos determinar las propiedades de visualización deseadas.

Vamos a crear una maquetación muy "clásica", sin utilizar todas las propiedades del módulo, que son muy numerosas:

  • un encabezado en una caja,

  • un contenedor principal en una caja, con tres cajas en su interior y alineadas en tres columnas,

  • un pie de página en una caja.

El encabezado y el pie de página se alinearán sobre las tres columnas.

He aquí el código HTML/CSS:

<!<!DOCTYPE html>  
<html lang="es">  
<head>  
     <title>Cajas flexibles</title>  
     <meta charset="UTF-8" />  
<style>  
     #caja {  
     ...