English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Manual de referencia CSS

CSS @reglas (RULES)

大全 de atributos CSS

CSS3 alineación-Método de uso y ejemplo del atributo content

Descripción

alineación-Cuando hay espacio adicional (vertical) en el eje horizontal, el atributo CSS puede alinear los elementos del contenedor flexible dentro del contenedor flexible. Este atributo no tiene efecto en los contenedores flexibles de una sola línea. Además, puede usar CSS justificar-contenidoAlinea los elementos sobre el eje principal (horizontal) de la propiedad.

La siguiente tabla resume el contexto de uso y el historial de versiones de esta propiedad.

Valor predeterminado:estirar
Aplicable a:Contenedor flexible de múltiples filas
Herencia:Ninguno
Animable:No.Ver: Atributo de animación.
Versión de CSS:CSS3nueva funcionalidad
Sintaxis de JavaScript:object.style.alignContent="centro"

alineación-Sintaxis de uso de content

La sintaxis de esta propiedad es la siguiente:

alineación-content: centro | flexible-inicio | flex-final | espacio-entre | espacio-alrededor | estirar | inicial | heredar

El siguiente ejemplo muestra cómo usar el alineamiento de CSS de align-Atributo content.

 .flex-contenedor {
           /* Navegador Safari */
           mostrar: -prefijo webkit-flex; 
           -prefijo webkit-flex-flow: fila envolver;
           -prefijo webkit-alineación-content: espacio-alrededor;
           /* Sintaxis estándar */
           mostrar: flex;
           flex-flow: fila envolver;
           alineación-content: espacio-alrededor;
    }
Prueba y mira‹/›

Valor del atributo

La siguiente tabla describe los valores de este atributo.

ValorDescripción
centroEl elemento se encuentra en el centro del contenedor flexible.
flex-inicioEl elemento se encuentra en el principio del contenedor flexible.
flex-finalEl elemento se encuentra en el extremo final del contenedor flexible.
espacio-entreDistribuir uniformemente los elementos en el contenedor flexible para que el espacio entre dos elementos adyacentes sea el mismo.
espacio-alrededorDistribuir uniformemente los elementos en el contenedor flexible para que el espacio alrededor de cada elemento (es decir, antes, entre y después) sea el mismo.
estirarEstirar el elemento para que se ajuste al contenedor flexible. El espacio disponible se distribuye uniformemente entre todos los elementos. Este es el valor predeterminado.
inicialEstablecer este atributo en su valor predeterminado.
heredarSi se especifica, el elemento asociado utiliza el valor calculado del atributo align del elemento padre.-content.

Compatibilidad del navegador

alineación-El atributo content es compatible con todos los navegadores principales. Los números representan la versión del primer navegador que admite el atributo.

  • Firefox 28+

  • Google Chrome21+

  • Internet Explorer 11+

  • Apple Safari 7+ -prefijo webkit-

  • Opera 12.1+

Nota: Apple Safari 7y versiones posteriores para soportar said align-Atributo content, pero es necesario-prefijo webkit-por ejemplo-prefijo webkit-alineación-content: center;

Leer más

Consulte los siguientes tutoriales:Alineación CSS.

Atributos relacionados:alineación-items,alineación-mismo,mostrar,flex,flex-base,flex-dirección,flex-flujo,flex-crecer,flex-encoger,flex-envolver,justificar-contenido,min-alto,min-ancho,orden.