Espacio de pruebas de CSS Flexbox Explorador visual de CSS Flexbox con controles interactivos para todas las propiedades del contenedor flexible.

CSS Flexbox se activa con display: flex en un elemento contenedor. La propiedad flex-direction establece el eje principal: fila (predeterminado, horizontal), columna (vertical) y sus variantes inversas. justify-content distribuye espacio en el eje principal: flex-start, flex-end, center, space-between (espacio igual entre elementos), space-around (espacio igual alrededor de los elementos) y space-evenly. align-items alinea en el eje cruzado: stretch (predeterminado, llena la altura), flex-start, flex-end, center y baseline. flex-wrap: wrap permite que los elementos fluyan a la siguiente línea cuando se desbordan. La propiedad gap agrega un espaciado consistente entre los elementos sin necesidad de márgenes. Los elementos flexibles pueden utilizar flex-grow, flex-shrink y flex-basis para controlar el tamaño. La propiedad order puede reorganizar los elementos sin cambiar el HTML. Flexbox es ideal para diseños unidimensionales (una sola fila o columna), mientras que CSS Grid es mejor para diseños bidimensionales.