
La propiedad flex-direction en CSS define cuál es el eje principal en un contenedor flexible y cuál es su orientación (normal o inversa).
Funciones flex-direction css
Valor inicial | row |
---|---|
Aplicado a | Contenedores flexibles. |
Heredable | No |
Móvil | No |
Valor calculado | Como se especificó. |
/* la orientación de los elementos es horizontal */ flex-direction : row ; /* La orientación de los elementos es horizontal, pero al revés */ flex-direction : row-reverse ; flex-direction : column ; /* La orientación de los elementos es vertical, pero al revés */ flex-direction: column-reverse; /* valores globales */ flex-direction: inherit; flex-direction: initial; flex-direction: unset;
Tenga en cuenta que los dos valores row
y row-reverse
influenciados por la dirección del contenedor flex, si la propiedad se dir
establece en ltr
(de izquierda a derecha, como en el idioma inglés), el valor de la row
dirección del eje horizontal de izquierda a derecha, y row-reverse
representará la horizontal dirección del eje de derecha a izquierda.
Pero si el valor dir
es igual rtl
(es decir, de derecha a izquierda, como en árabe), representará row
el eje horizontal moviéndose de derecha a izquierda, y el valor lo row-reverse
representará pero de izquierda a derecha.
Ejemplos y aplicaciones en código
Un ejemplo del uso de la propiedad flex-direction
para establecer el eje principal y su dirección, y muestra el uso de las palabras reservadas row
, row-reverse
, column
y column-reverse
:
<div class="grid"> <div class="col"> <div class="row"> <div class="cell"> row <div class="container row"> <span>A</span> <span>B</span> <span>C</span> </div> </div> <div class="cell"> row-reverse <div class="container row-reverse"> <span>A</span> <span>B</span> <span>C</span> </div> </div> </div> <div class="row"> <div class="cell"> column <div class="container column"> <span>A</span> <span>B</span> <span>C</span> </div> </div> <div class="cell"> column-reverse <div class="container column-reverse"> <span>A</span> <span>B</span> <span>C</span> </div> </div> </div> </div> </div>
Código CSS:
.grid { width: 100%; min-height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; height: auto; } .col { display: flex; flex: 1 auto; flex-direction: column; height: auto; } .cell { margin: .5em; padding: .5em; background-color: #FFF; overflow: hidden; text-align: center; flex: 1 auto; } .container { background: #E4F0F5; padding: .5rem; margin: 0 auto; font-size: 1rem; display:flex; width: 11rem; height: 11rem; } .container span { display: block; padding: 1em; margin: .1em; border: 1px solid black; background: #CCC; flex: 1; } .row { flex-direction: row; } .row-reverse { flex-direction: row-reverse; } .column { flex-direction: column; } .column-reverse { flex-direction: column-reverse; }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 29,0 | 20,0 | 11 | 12,5 | 9.0 |
Las versiones anteriores de algunos navegadores (como Chrome, IE y Safari) admitían flexbox pero con un uso anterior ( -webkit-
o -ms-
).
Características general
La propiedad acepta flex-direction
uno de los siguientes valores:
row
El eje principal del contenedor flexible estará en la misma dirección que el texto, es decir, de izquierda a derecha si es dir
igual ltr
y de derecha a izquierda si es dir
igual a rtl
.
row-reverse
Tiene el mismo comportamiento que la palabra reservada row
pero con el comienzo y el final en el lado opuesto.
column
El eje principal del contenedor flexible será de arriba a abajo.
column -reverse
Tiene el mismo comportamiento que la palabra reservada column
pero con el comienzo y el final en el lado opuesto.
Estructura flex-direction css
flex-direction: row | row-reverse | column | column-reverse;
Consulte también
- Propiedad
flex
Página La página de sub-propiedades que esta conjuntos de propiedades son:flex-basis
,flex-flow
,flex-grow
,flex-shrink
yflex-wrap
. - La página de cada una de las propiedades
width
,height
que se encarga de configurar las dimensiones del elemento. - La página de propiedades
position
que describe cómo se debe colocar el elemento en el documento.
- Introducción al Lenguaje de Programación CSS
- Características text-decoration-style en CSS
- Características text-decoration-line en CSS
- Características text-decoration-color en CSS
- Características text-decoration en CSS
- Características text-align-last en CSS
- Características text-align en CSS
- Características tab-size en CSS
- Características overflow-wrap en CSS
- Características line-break en CSS
- Características letter-spacing en CSS
- Características direction en CSS
- Características line-height en CSS
- Características font-style en CSS
- Características font-weight en CSS
- Características font-stretch en CSS
- Características font en CSS
- Características font-size-adjust en CSS
- Características font-size en CSS
- Características font-kerning en CSS
- Características font-family en CSS
- Características order en CSS
- Características justify-content en CSS
- Características flex-wrap en CSS
- Características flex-shrink en CSS
- Características flex-grow en CSS
- Características flex-flow en CSS
- Características flex-direction en CSS
- Características flex-basis en CSS
- Características flex en CSS
- Características align-self en CSS
- Características align-items en CSS
- Características align-content en CSS
- Características overflow-y en CSS
- Características overflow-x en CSS
- Características overflow en CSS
- Características padding-right en CSS
- Características padding-left en CSS
- Características padding-bottom en CSS
- Características margin-top en CSS
- Características padding-top en CSS
- Características margin-right en CSS