CSS: La Guía Definitiva, 5ª Edición

Capítulo 11. Disposición flexible de las cajas

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

El Módulo de Caja Flexible CSS Nivel 1, o flexbox para abreviar, hace casi sencillas las antes difíciles tareas de maquetar ciertos tipos de páginas, widgets, aplicaciones y galerías. Con flexbox, a menudo no necesitas un framework CSS. En este capítulo, aprenderás a utilizar sólo unas pocas líneas de CSS para crear casi cualquier característica que requiera tu sitio.

Fundamentos de Flexbox

Flexbox es una forma sencilla y potente de disponer los componentes de una página dictando cómo se distribuye el espacio, se alinea el contenido y se ordenan visualmente los elementos. El contenido puede organizarse fácilmente en vertical u horizontal, y puede disponerse a lo largo de un único eje o en varias líneas. Y mucho, mucho más.

Con flexbox, la apariencia del contenido puede ser independiente del orden de origen. Aunque se alteren visualmente, las propiedades de flexbox no deben afectar al orden del contenido leído porlos lectores de pantalla.

Advertencia

Las especificaciones dicen que los lectores de pantalla de deben seguir el orden fuente, pero desde finales de 2022, Firefox sigue el orden visual. En el momento de escribir esto, una propuesta pide que se añada una propiedad CSS que especifique si se debe seguir el orden fuente o el visual, por lo que puede que pronto sea posible decidir por ti mismo.

Tal vez lo más importante ...