stringtranslate.com

Diseño de caja flexible CSS

CSS Flexible Box Layout , comúnmente conocido como Flexbox , [2] es un modelo de diseño web CSS . [4] Está en la etapa de recomendación de candidato (CR) del W3C . [2] El diseño flexible permite que los elementos responsivos dentro de un contenedor se organicen automáticamente según el tamaño de la ventana gráfica (pantalla del dispositivo).

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 su apariencia : sus colores, fuentes, formato, diseño y estilo.

El diseño flex-box de 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 de adaptarse a la forma del entorno de visualización. Los contenedores flexibles pueden ajustarse en tamaño, ya sea disminuyendo para evitar monopolizar el espacio innecesariamente, o aumentando para dejar espacio para que el contenido encaje dentro de sus límites. Además, el diseño flexible es menos restrictivo en términos de flujo de contenido que el de otros modelos de diseño CSS, que generalmente son unidireccionales. El flujo direccional flexible se puede especificar hacia la derecha, hacia la izquierda, hacia arriba o hacia abajo. Los elementos individuales dentro de un contenedor flexible también se pueden reorganizar automáticamente para adaptarse al espacio de diseño disponible. [3]

Historia

Desde finales de la década de 2000 en adelante, el uso intensivo de la Web por parte de agentes móviles motivó "diseños líquidos" y elementos responsivos para la creciente variedad de tamaños de pantalla . [5] En la década de 2010, el uso intensivo de los populares marcos de diseño de JavaScript , como Bootstrap , inspiró las especificaciones de diseño de cuadrícula y flex-box de CSS. [6]

Los módulos CSS incluían soluciones similares a esta, como Flexbox [2] y grid . [7] Flexbox se basa originalmente en una característica similar disponible en XUL , el kit de herramientas de interfaz de usuario de Mozilla , utilizado en Firefox . [8] [9]

A diciembre de 2022 , el 99,68 % de los navegadores instalados (el 99,59 % de los navegadores de escritorio y el 100 % de los navegadores móviles) admiten el diseño de caja flexible CSS. [10]

Terminología

Los siguientes términos están asociados con el modelo de diseño flexbox.

Contenedor flexible
Elemento principal que contiene todos los elementos flexibles. Mediante la propiedad de visualización de CSS, el contenedor se puede definir como flexible 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 se envuelve en un elemento flexible desconocido.
Ejes
Cada cuadro flexible contiene dos ejes: el eje principal y el eje transversal. El eje principal es el eje en el que se alinean los elementos entre sí. El eje transversal es perpendicular al eje principal.
Dirección flexible
Establece el eje principal. Posibles argumentos: fila (predeterminado), fila inversa, columna, columna inversa.
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 líneas, espacio alrededor.
Alinear elementos
Determina el valor predeterminado para colocar los elementos flexibles en el eje transversal de cada línea.
Alinear contenido
Determina el valor predeterminado para la alineación de las líneas del eje transversal.
Alinearse a sí mismo
Determina cómo se coloca un elemento individual a lo largo del eje transversal. Esto anula cualquier valor predeterminado establecido por align-items.

Instrucciones

inicio cruzado
extremo transversal
Los lados de inicio/fin transversal determinan dónde se llenan las líneas flexibles con elementos flexibles desde el inicio hasta el fin transversal.
inicio principal
extremo principal
Los lados de inicio principal/fin principal determinan dónde comenzar a colocar elementos flexibles dentro del contenedor flexible, comenzando desde el extremo de inicio principal y yendo hasta el extremo principal.
Orden
Coloca elementos en grupos y determina en qué orden deben colocarse dentro del contenedor.
Flujo flexible
Abreviaturas flex-direction y flex-wrap para colocar el contenido flexible.

Pauta

Pauta
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 cómo 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 relaciona con los ejes principal y transversal respectivamente.

Uso

Para designar un elemento como elemento flexible es necesario configurar la propiedad de visualización CSS del elemento como 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 hijos, en elementos flexibles. Configurar la pantalla en flex convierte al contenedor en un elemento de nivel de bloque , mientras que configurar la pantalla en inline-flex convierte al contenedor en un elemento de nivel de línea . [4]

Alinear al centro

Una de las ventajas de flexbox es la capacidad de alinear fácilmente los elementos dentro del contenedor en el centro de una página, tanto vertical como horizontalmente.

pantalla : flex ; alinear elementos : centrar ; justificar contenido : centrar ;

Referencias

  1. ^ "Historial de publicación del módulo de diseño de caja flexible CSS de nivel 1 - W3C". W3C . nd . Consultado el 8 de abril de 2021 .
  2. ^ abcdefg Atkins Jr., pestaña; Etemad, Elika J.; Atanassov, Rossen; Mogilevsky, Alex; Barón, 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 .
  3. ^ ab 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 .
  4. ^ ab "Conceptos básicos de flexbox". MDN Web Docs . nd . Consultado el 8 de abril de 2021 .
  5. ^ Bail, Jeff (23 de octubre de 2012). "Utilice consultas de medios CSS para crear sitios web responsivos". IBM Developer . Archivado desde el original el 13 de octubre de 2020. Consultado el 8 de abril de 2021 .
  6. ^ Shepherd, Richard (19 de septiembre de 2011). "Diseño de caja flexible CSS3: todo lo que me hubiera gustado saber cuando empecé". Smashing Magazine . Consultado el 8 de abril de 2021 .
  7. ^ Atkins Jr., Tab; Etemad, Elika J.; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil, eds. (18 de diciembre de 2020). "Módulo de diseño de cuadrícula CSS nivel 1". W3C . Grupo de trabajo CSS . Consultado el 8 de abril de 2021 .
  8. ^ Shepherd, Richard (19 de septiembre de 2011). "Diseño de caja flexible CSS3: todo lo que me hubiera gustado saber cuando empecé". Smashing Magazine . Consultado el 8 de abril de 2021 .
  9. ^ Módulo de diseño de caja flexible, borrador de trabajo del W3C, 23 de julio de 2009
  10. ^ "Módulo de diseño de caja flexible CSS". ¿Puedo utilizar ? Consultado el 3 de septiembre de 2020 .