El diseño de caja flexible CSS , comúnmente conocido como Flexbox , [2] es un modelo de diseño web CSS 3 . [4] Se encuentra en la etapa de recomendación de candidatos (CR) del W3C . [2] El diseño flexible permite que los elementos sensibles dentro de un contenedor se organicen automáticamente según el tamaño de la pantalla (o dispositivo).
Diseño de caja flexible CSS | |
Nombre nativo | Diseño de caja flexible CSS |
---|---|
Estado | Recomendación candidata (CR) |
Año iniciado | 23 de julio de 2009 [1] |
Ultima versión | Nivel 1 [2] 9 de noviembre de 2018 [2] |
Versión de vista previa | Borrador de trabajo 25 de marzo de 2021 [3] |
Organización | |
Comité | Grupo de trabajo CSS [2] |
Editores |
Antiguos editores
|
Estándares básicos | CSS |
Abreviatura | Flexbox |
Sitio web | www |
Conceptos
La mayoría de las páginas web están escritas en una combinación de HTML (lenguaje de marcado de hipertexto) y CSS (hojas de estilo en cascada). En resumen, HTML especifica el contenido y la estructura lógica de la página , mientras que CSS especifica cómo se ve : sus colores, fuentes, formato, diseño y estilo.
El diseño de caja flexible CSS es una forma particular de especificar el diseño de las páginas HTML.
Una de las características más definitorias del diseño flexible es su capacidad para adaptarse a la forma, según su entorno de visualización. Las cajas flexibles se pueden ajustar en tamaño, ya sea disminuyendo, para evitar monopolizar innecesariamente el espacio, o aumentando para dejar espacio para que el contenido quede restringido dentro de sus límites. Además, el diseño flexible es menos restrictivo en términos de flujo de contenido que aquellos, por ejemplo, de los tipos de visualización en bloque y en línea, que generalmente son unidireccionales. El flujo direccional flexible se puede especificar como hacia la derecha, hacia la izquierda, hacia arriba o hacia abajo. Los elementos individuales dentro de un contenedor flexible también se pueden reordenar y reorganizar automáticamente para adaptarse al espacio de diseño disponible. [3]
Historia
En la década de 2000, el uso intensivo de la Web por parte de agentes móviles motivó "diseños líquidos" y elementos de respuesta para la creciente variedad de tamaños de pantalla. [5] En la década de 2010, el uso intensivo de marcos de diseño de JavaScript populares, como Bootstrap , inspiró especificaciones de diseño de cuadrícula y caja flexible de CSS. [6]
Los módulos CSS 3 incluían soluciones similares a esta, como flexbox [2] y grid . [7]
A septiembre de 2020[actualizar], El 98,69% de los navegadores instalados (99,29% de los navegadores de escritorio y 100% de los navegadores móviles) admiten el diseño de caja flexible CSS. [8]
Terminología
Los siguientes términos están asociados con el modelo de diseño de caja flexible.
- Contenedor flexible
- Elemento principal que contiene todos los elementos flexibles. Usando la propiedad de visualización de CSS, el contenedor se puede definir como flex o inline-flex.
- Elemento flexible
- Cualquier elemento secundario directo contenido dentro del contenedor flexible se considera un elemento flexible. Cualquier texto dentro del elemento contenedor está envuelto en un elemento flexible desconocido.
- Ejes
- Cada caja flexible contiene dos ejes: el eje principal y el transversal. El eje principal es el eje en el que los elementos se alinean entre sí. El eje transversal es perpendicular al eje principal.
- Dirección de flexión
- Establece el eje principal. Posibles argumentos: fila (predeterminado), fila al revés, columna, columna al revés.
- Justificar contenido
- Determina cómo se coloca el contenido en el eje principal de la línea actual. Argumentos opcionales: izquierda, derecha, centro, espacio entre, espacio alrededor.
- Alinear elementos
- Determina el valor predeterminado de cómo se colocan los elementos flexibles en el eje transversal de cada línea.
- Alinear contenido
- Determina el valor predeterminado de cómo se alinean las líneas transversales del eje.
- Alinearse a sí mismo
- Determina cómo se coloca un solo elemento a lo largo del eje transversal. Esto anula los valores predeterminados establecidos por align-items.
Direcciones
- inicio cruzado
- extremo cruzado
- Los lados de inicio cruzado / extremo cruzado determinan dónde se rellenan las líneas flexibles con elementos flexibles desde el inicio cruzado hasta el final cruzado.
- inicio principal
- extremo principal
- Los lados principal-inicio / principal-final determinan dónde comenzar a colocar elementos flexibles dentro del contenedor flexible, comenzando desde el extremo principal-inicio y yendo al extremo principal-final.
- Pedido
- Coloca los elementos en grupos y determina en qué orden se colocarán dentro del contenedor.
- Flujo flexible
- Shorthands flex-direction y flex-wrap para colocar el contenido flexible.
Líneas
- Líneas
- Los elementos flexibles se pueden colocar en una línea singular o en varias líneas según lo definido por la propiedad flex-wrap, que controla tanto la dirección del eje transversal como la forma en que se apilan las líneas dentro del contenedor.
Dimensiones
- Tamaño principal
- Tamaño de la cruz
- El tamaño principal y el tamaño transversal son la altura y el ancho del contenedor flexible, cada uno de los cuales se ocupa de los ejes principal y transversal respectivamente.
Uso
La designación de un elemento como elemento flexible requiere establecer la propiedad de visualización CSS del elemento en flex o inline-flex, de la siguiente manera:
pantalla : flex ;
O:
pantalla : inline-flex ;
Al configurar la pantalla en uno de los dos valores anteriores, un elemento se convierte en un contenedor flexible y sus elementos secundarios flexionan. Configurar la pantalla en flex hace que el contenedor sea un elemento de nivel de bloque , mientras que configurar la pantalla en inline-flex hace que el contenedor sea un elemento de nivel en línea . [4]
Alinear al centro
Una de las ventajas de flexbox es la capacidad de alinear fácilmente elementos dentro del contenedor con el centro de una página, tanto vertical como horizontalmente.
pantalla : flex ; alinear-elementos : centro ; justificar-contenido : centro ;
Referencias
- ^ "Historial de publicaciones de nivel 1 del módulo de diseño de caja flexible CSS - W3C" . W3C . nd . Consultado el 8 de abril de 2021 .
- ^ a b c d e f g Atkins Jr., Tab; Etemad, Elika J .; Atanassov, Rossen; Mogilevsky, Alex; Baron, L. David; Deakin, Neil; Hickson, Ian; Hyatt, David, eds. (09/11/2018). "Módulo de diseño de caja flexible CSS Nivel 1" . W3C . Consultado el 8 de abril de 2021 .
- ^ a b Atkins Jr., Tab; Etemad, Elika J .; Atanassov, Rossen; Mogilevsky, Alex; Baron, L. David; Deakin, Neil; Hickson, Ian; Hyatt, David, eds. (25 de marzo de 2021). "Módulo de diseño de caja flexible CSS Nivel 1" . Borradores del editor del grupo de trabajo CSS . Consultado el 8 de abril de 2021 .
- ^ a b "Conceptos básicos de flexbox" . Documentos web de MDN . nd . Consultado el 8 de abril de 2021 .
- ^ Fianza, Jeff (23 de octubre de 2012). "Utilice consultas de medios CSS para crear sitios web receptivos" . Desarrollador de IBM . Archivado desde el original el 13 de octubre de 2020 . Consultado el 8 de abril de 2021 .
- ^ Pastor, Richard (19 de septiembre de 2011). "Diseño de caja flexible CSS3: todo lo que desearía saber cuando comencé" . Revista Smashing . Consultado el 8 de abril de 2021 .
- ^ Atkins Jr., Tab; Etemad, Elika J .; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil, eds. (18/12/2020). "Nivel 1 del módulo de diseño de cuadrícula CSS" . W3C . Grupo de trabajo CSS . Consultado el 8 de abril de 2021 .
- ^ "Módulo de diseño de caja flexible CSS" . Puedo usar . Consultado el 3 de septiembre de 2020 .