CSS flex-direction egenskap

Definition och användning

flex-direction-attributet definierar riktningen för elastiska objekt.

Kommentar:Om elementet inte är ett elastiskt projekt, är flex-attributet ogiltigt.

Se också:

CSS tutorial:CSS flexbox

CSS referenshandbok:flex egenskap

CSS referenshandbok:flex-basis egenskap

CSS referenshandbok:flex-flow egenskap

CSS referenshandbok:flex-grow egenskap

CSS referenshandbok:flex-shrink egenskap

CSS referenshandbok:flex-wrap egenskap

HTML DOM referenshandbok:flexDirection egenskap

Exempel

Ställ in riktningen för elastiska objekt inom <div>-elementet i motsatt ordning:

div {
  display: flex;
  flex-direction: row-reverse; 
}

Prova själv

CSS syntax

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

Egenskapsvärde

Värde Beskrivning
row Standardvärde. Visa elastiska objekt horisontellt som rader.
row-reverse Liknande rader, men i motsatt riktning.
column Visa elastiska objekt vertikalt som kolonner.
column-reverse Liknande kolonner, men i motsatt riktning.
initial Sätt detta värde till dess standardvärde. Se till: initial.
inherit Arbeta från föräldrelementet. Se till: inherit.

Tekniska detaljer

Standardvärde: row
Arv: Nej
Animation production: Stöds inte. Se till:Animation relaterade egenskaper.
Version: CSS3
JavaScript syntax: object.style.flexDirection="column-reverse"

Mer exempel

Kombinera flex-direction och media query för att skapa olika layouter för olika skärmstorlekar/enheter:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Responsiv layout - skapa enklad enkolig layout (100%) istället för tvåkolig layout (50%) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Prova själv

Webbläsarstöd

Tal i tabellen anger den första webbläsarversion som helt stöder egenskapen.

Tal med -webkit- eller -moz- prefix indikerar den första versionen som använder prefix.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0