Dirección flexible - Trucos CSS

Anonim

La flex-directionpropiedad es una subpropiedad del módulo Diseño de caja flexible.

Establece el eje principal, definiendo así la dirección en que se colocan los elementos flexibles en el contenedor flexible.

Recordatorio: el eje principal de un contenedor flexible es el eje principal a lo largo del cual se colocan los elementos flexibles. Cuidado, no es necesariamente horizontal; depende de la flex-directionpropiedad.

La flex-directionpropiedad acepta 4 valores diferentes:

  • row( predeterminado ): igual que la dirección del texto
  • row-reverse: opuesto a la dirección del texto
  • column: igual que rowpero de arriba a abajo
  • column-reverse: igual que de row-reversearriba a abajo

Tenga en cuenta que rowy row-reversese ven afectados por la direccionalidad del contenedor flexible. Si la dirección del texto es ltr, rowrepresenta el eje horizontal orientado de izquierda a derecha y row-reversede derecha a izquierda; si la dirección es rtl, es la contraria.

Sintaxis

flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )

Manifestación

En la siguiente demostración:

  • La lista roja está configurada en row
  • La lista amarilla está configurada en row-reverse
  • La lista azul está configurada en column
  • La lista verde está configurada para column-reverse

Nota: la dirección del texto no se ha editado.

¡Mira este bolígrafo!

Entonces, básicamente, lo usará rowen la mayoría de los casos, o columnbajo ciertas circunstancias. De lo contrario, es poco común invertir el orden de dirección.

Soporte del navegador

  • (moderno) significa la sintaxis reciente de la especificación (p display: flex;. ej. )
  • (híbrido) significa una sintaxis no oficial extraña de 2011 (p display: flexbox;. ej. )
  • (antiguo) significa la sintaxis antigua de 2009 (p display: box;. ej. )
Cromo Safari Firefox Ópera ES DECIR Androide iOS
21+ (moderno)
20- (antiguo)		 3.1+ (antiguo) 2-21 (antiguo)
22+ (nuevo)		 12.1+ (moderno) 10+ (híbrido) 2.1+ (antiguo) 3.2+ (antiguo)

El navegador Blackberry 10+ admite la nueva sintaxis.

Para obtener más información sobre cómo mezclar sintaxis para obtener la mejor compatibilidad con el navegador, consulte este artículo (Trucos CSS) o este artículo (DevOpera).