Flexbox - Descripción general

CAscading Style Sheets (CSS) es un lenguaje de diseño simple destinado a simplificar el proceso de hacer que las páginas web sean presentables. CSS se encarga de la apariencia de una página web.

Con CSS, puede controlar el color del texto, el estilo de las fuentes, el espacio entre párrafos, el tamaño y la disposición de las columnas, qué imágenes de fondo o colores se utilizan, diseños de diseño, variaciones en la visualización para diferentes dispositivos y tamaños de pantalla. así como una variedad de otros efectos.

Para determinar la posición y las dimensiones de los cuadros, en CSS, puede utilizar uno de los modos de diseño disponibles:

  • The block layout - Este modo se utiliza para diseñar documentos.

  • The inline layout - Este modo se utiliza para diseñar texto.

  • The table layout - Este modo se utiliza para diseñar tablas.

  • The table layout - Este modo se utiliza para posicionar los elementos.

Todos estos modos se utilizan para alinear elementos específicos como documentos, texto, tablas, etc., sin embargo, ninguno de ellos proporciona una solución completa para diseñar sitios web complejos. Inicialmente, esto se suele hacer mediante una combinación de elementos flotantes, elementos posicionados y diseño de tabla (a menudo). Pero los flotadores solo permiten colocar las cajas horizontalmente.

¿Qué es Flexbox?

Además de los modos mencionados anteriormente, CSS3 proporciona otro modo de diseño Caja flexible, comúnmente llamado como Flexbox.

Con este modo, puede crear fácilmente diseños para aplicaciones y páginas web complejas. A diferencia de los flotadores, el diseño de Flexbox brinda un control completo sobre la dirección, alineación, orden y tamaño de las cajas.

Características de Flexbox

Las siguientes son las características notables del diseño de Flexbox:

  • Direction - Puede organizar los elementos en una página web en cualquier dirección, como de izquierda a derecha, de derecha a izquierda, de arriba a abajo y de abajo a arriba.

  • Order - Con Flexbox, puede reorganizar el orden de los contenidos de una página web.

  • Wrap - En caso de espacio inconsistente para el contenido de una página web (en una sola línea), puede envolverlos en varias líneas (tanto horizontalmente) como verticalmente.

  • Alignment - Con Flexbox, puede alinear el contenido de la página web con respecto a su contenedor.

  • Resize - Con Flexbox, puede aumentar o disminuir el tamaño de los elementos de la página para que quepan en el espacio disponible.

Navegadores compatibles

A continuación se muestran los navegadores compatibles con Flexbox.

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Safari 6.1+
  • Android 4.4 o superior
  • iOS 7.1 o superior