libro de referencias CSS

CSS @reglas (RULES)

大全 de propiedades CSS

CSS3 flex-Atributo flow CSS3 flex-Atributo basis

CSS3 flex-Métodos de uso y ejemplos de la propiedad 'direction'

Al establecer la dirección del eje principal del contenedor flex, flex-La propiedad CSS 'direction' especifica cómo se colocan los elementos flex en el contenedor flex.

La tabla a continuación proporciona la descripción de uso y el historial de versiones de esta propiedad, así como la sintaxis de uso de esta propiedad en el script JavaScript.

Valor predeterminado:	row
Apto para:	Contenedor flexible
Herencia:	No
Animable:	No.Ver Atributos de animación.
Versión:	CSS3nueva característica
JavaScript syntax:	object.style.flexDirection="row-reverse"

flex-Sintaxis de uso de direction

La sintaxis de este atributo es la siguiente:

flex-direction:　row　|　row-reverse　|　column　|　column-reverse　|　initial　|　inherit

El siguiente ejemplo muestra cómo usar flex-Atributo direction.

Ejemplo

.flex-container　{
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction:　row-reverse;
　　　　
　　　　display:　flex;
　　　　flex-direction:　row-reverse;　　　　
}

Ver prueba‹/›

Valor del atributo

La tabla a continuación describe los valores de este atributo.

Valor	Descripción
row	El eje principal del contenedor flex es la dirección del eje en línea del modo de escritura actual, es decir, la dirección del texto.
row-reverse	Igual que row, pero el punto de partida y el punto de destino del eje son opuestos.
column	El eje principal del contenedor flex es la dirección del eje de bloques del texto actual (el eje vertical en el modo de escritura horizontal y el eje horizontal en el modo de escritura vertical).
column-reverse	Igual que las columnas, pero el punto de partida y el punto de destino del eje son opuestos.
initial	Establecer este atributo en su valor predeterminado.
inherit	Si se especifica, los elementos relacionados adoptan el flex del elemento padre-Valores del atributo direction.

Compatibilidad del navegador

flex-La compatibilidad del navegador del atributo direction, los números en la tabla a continuación indican la versión mínima del navegador que admite este atributo; todos los navegadores principales admiten este atributo.

	Firefox 18+ ^-moz-,28 Google Chrome 21+ ^-webkit-,29 Internet Explorer 10+ ^-ms-,11 Apple Safari 6.1+ ^-webkit- Opera 12.1+

Leer más

Consulte la siguiente instrucción:CSS3Diseño de múltiples columnas.

Atributos relacionados:align-content,align-items,align-self,display,flex,flex-basis,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.

CSS3 flex-Atributo flow CSS3 flex-Atributo basis