CSS flex-direction egenskab

Definition og brug

flex-direction-ejendommen bestemmer retningen af elastiske projekter.

Bemærkninger:Hvis elementet ikke er et elastisk projekt, er flex-ejendommen ugyldig.

Se også:

CSS tutorial:CSS elastisk boks

CSS referencehåndbog:flex egenskab

CSS referencehåndbog:flex-basis egenskab

CSS referencehåndbog:flex-flow egenskab

CSS referencehåndbog:flex-grow egenskab

CSS referencehåndbog:flex-shrink egenskab

CSS referencehåndbog:flex-wrap egenskab

HTML DOM referencehåndbog:flexDirection egenskab

Eksempel

Indstil retningen af elastiske elementer inden for <div>-elementet i omvendt rækkefølge:

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

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi Beskrivelse
row Standardværdi. Vis elastiske elementer vandret som rækker.
row-reverse Lignende rækker, men i omvendt rækkefølge.
column Vis elastiske elementer lodret som kolonner.
column-reverse Lignende kolonner, men i omvendt rækkefølge.
initial Sæt denne egenskab til dens standardværdi. Se initial.
inherit Arv denne egenskab fra sin forældrelement. Se inherit.

Tekniske detaljer

Standardværdi: row
Arv: Nej
Animation lavet: Ikke understøttet. Se:Animation relaterede egenskaber.
Version: CSS3
JavaScript syntaks: object.style.flexDirection="column-reverse"

Flere eksempler

Kombiner flex-direction og medieforespørgsel for at oprette forskellige layouter for forskellige skærmstørrelser/enheder:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Responsiv layout - opret en enkelt kolonne layout (100%) i stedet for to kolonner layout (50%) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Prøv det selv

Browserunderstøttelse

Talene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Tal med -webkit- eller -moz- foran betyder den første version, der bruger præfikset.

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