CSS flex egenskab

Definition og brug

Flex er en forkortelse for følgende egenskaber:

Flex angiver længden af det elastiske projekt.

Kommentar:Hvis elementet ikke er et elastisk projekt, er flex-eegenskaben ugyldig.

Se også:

Instruktion: CSS elastisk ramme

reference:CSS flex-basis egenskab

reference:CSS flex-direction egenskab

reference:CSS flex-flow egenskab

reference:CSS flex-grow egenskab

reference:CSS flex-shrink egenskab

reference:CSS flex-wrap egenskab

reference:HTML DOM flex egenskab

eksempel

gør alle elastiske elementers længde ens, uanset indholdet:

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

prøv det selv

CSS syntaks

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

egenskabsværdi

værdi beskrivelse
flex-grow tal, der angiver elementets ekspansion i forhold til de øvrige elastiske elementer.
flex-shrink tal, der angiver elementets kontrahering i forhold til de øvrige elastiske elementer.
flex-basis

længden af elementet.

gældende værdier: "auto", "inherit", eller værdier med enheder som "%", "px", "em", eller andre længdeenheder.
auto lig med 1 1 auto.
initial lig med 0 1 auto. Se: initial.
none lig med 0 0 auto.
inherit arver egenskaben fra sin forældrelige element. Se: inherit.

tekniske detaljer

standardværdi: 0 1 auto
inheritance: nej
animation production: understøttet. Se separate egenskaber. Se:animation relaterede egenskaber.
version: CSS3
JavaScript syntaks: object.style.flex="1"

flere eksempler

Brug af flex og medieforespørgsel til at oprette forskellige layouter for forskellige skærmskalaer/enheder:

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

prøv det selv

browserunderstøttelse

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

Tal i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben med præfikset -webkit-, -ms- eller -moz-.

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