flex-direction
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
La propiedad CSS flex-direction
especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección (normal o al revés).
Pruébalo
Tenga en cuenta que el valor de row
y row-reverse
se verán afectados por la direccionalidad del contenedor flexible. Si su atributo dir
es ltr
, row
representa el eje horizontal orientado de izquierda a derecha, y row-reverse
desde la derecha hacia la izquierda; si el atributo dir
es rtl
, row
representa el eje orientado de derecha a izquierda, y row-reverse
de izquierda a derecha.
Sintaxis
/* La dirección del texto se presenta en una línea */
flex-direction: row;
/* Como <row>, pero al revés */
flex-direction: row-reverse;
/* La dirección en la que se apilas las líneas de texto */
flex-direction: column;
/* Como <column>, pero al revés */
flex-direction: column-reverse;
/* Valores globales */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;
Valores
Se aceptan los siguientes valores:
row
-
El eje principal del contenedor flexible está definido para ser el mismo que la dirección del texto. Los puntos principales de inicio y final son los mismos que la dirección del contenido.
row-reverse
-
Se comporta igual que
row
pero los puntos principales de inicio y final son intercambiados. column
-
El eje principal del contenedor flexible es el mismo que el eje del bloque. Los puntos principales de inicio y final son los mismos que los puntos de antes y después del modo escritura.
column-reverse
-
Se comporta igual que column pero los puntos principales de inicio y final son intercambiados.
Sintaxis formal
Ejemplo
HTML
<h4>Esto es un Column-Reverse</h4>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
</div>
<h4>Esto es un Row-Reverse</h4>
<div id="content1">
<div class="box1" style="background-color:red;">A</div>
<div class="box1" style="background-color:lightblue;">B</div>
<div class="box1" style="background-color:yellow;">C</div>
</div>
CSS
#content {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-direction: column-reverse;
display: flex;
flex-direction: column-reverse;
}
.box {
width: 50px;
height: 50px;
}
#content1 {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
}
.box1 {
width: 50px;
height: 50px;
}
Resultado
Sobre Accesibilidad
Si utilizas flex-direction
con un valor de row-reverse
o column-reverse
en elementos que necesitan foco (como botones) el orden de visualización será distinto al orden el DOM, por lo que los usuarios de lectores de pantalla no verán reflejado el mismo orden de los elementos que un usuario vidente. Para más información (en inglés):
Especificaciones
Specification |
---|
CSS Flexible Box Layout Module Level 1 # flex-direction-property |
Compatibilidad con navegadores
BCD tables only load in the browser
Ver también
- Guía de CSS Flexbox: Conceptos básicos de Flexbox
- Guía de CSS Flexbox: Ordenar items flex