La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible interfieran con los m´rgenes de sus contenidos.
Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.
Cuando trabajamos con flexbox necesitamos pensar en términos de dos ejes — eje principal y el eje cruzado. El eje principal está definido por la propiedad flex-direction, y el eje cruzado es perpendicular a este. Todo lo que hacemos con flexbox está referido a estos dos ejes, por lo que vale la pena entender cómo trabajan desde el principio
| código | ejemplo |
|---|---|
| #efecto2{ width: 230px; height: 24px; display: flex; margin: auto; flex-direction: row-reverse; } .e2{ text-align: center; width: 120px; height: 24px; border: 2px solid rgb(226, 43, 43); background-color:rgb(0, 119, 255); } |
|
| Vídeo explicación | |