Descripción general de FlexboxManual de estudio

Published on 2023-04-20 00:10:05 · 中文 · English · بالعربية · हिंदीName · 日本語 · Русский язык · 中文繁體

Cen cascada Style Sheets (CSS) es un lenguaje de diseño simple diseñado para simplificar el proceso de representación de páginas web. CSS se ocupa de las partes de apariencia de una página web.
Con CSS, puede controlar el color del texto, el estilo de fuente, el espaciado entre párrafos, el tamaño y la disposición de las columnas, las imágenes de fondo o los colores utilizados, el diseño del diseño, las variaciones de visualización y los tamaños de pantalla para diferentes dispositivos, y una variedad de otros efectos.
Para determinar la posición y el tamaño de la caja, en CSS, puede utilizar uno de los modos de diseño disponibles:
Diseño de bloques: este modo se utiliza para diseñar documentos. Diseño en línea: este modo se utiliza para diseñar texto. Diseño de tabla: este modo se utiliza para diseñar tablas. Diseño de tabla: este modo se utiliza para posicionar elementos.
Todos estos patrones se utilizan para alinear elementos específicos como documentos, texto, tablas, etc., sin embargo, ninguno de estos patrones proporciona una solución completa para diseñar sitios web complejos. Inicialmente, esto se hizo utilizando una combinación de elementos flotantes, elementos anclados y (generalmente) diseños de tabla. Pero flotar solo permite cajas de posicionamiento horizontal.

¿Qué es una caja elástica?

Además de los modos anteriores, CSS3 proporciona otro modo de diseño, Flexible Box, comúnmente llamado Flexbox。
Con este patrón, puede crear fácilmente diseños para aplicaciones y páginas web complejas. A diferencia de los diseños flotantes, los diseños Flexbox tienen control total sobre la orientación, alineación, orden y tamaño de la caja.

Características de Flexbox

Estas son las características notables del diseño Flexbox-
Dirección: puede organizar los elementos de 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. Orden: con Flexbox, puede reorganizar el orden del contenido de su página web. Ajustar: si el contenido de una página web es espacialmente inconsistente (una sola línea), puede envolverlos en varias líneas (horizontales) y verticales. Alineación: con Flexbox, puede alinear el contenido de una página web con su contenedor. Cambiar tamaño: con Flexbox, puede aumentar o disminuir el tamaño de los elementos de su página para que se ajusten al espacio disponible.

Soporte para navegadores

Los siguientes son navegadores compatibles con Flexbox.
Cromo 29+ Firefox 28+ Internet Explorer 11+ Ópera 17+ Safari 6.1+ Android 4.4+ iOS 7.1+