CSS flex egenskap

Definition och användning

Flex är en förkortning för följande egenskaper:

Flex definierar längden på det elastiska projektet.

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

För mer information, se:

Manual: CSS elastisk ramverk

Referens:CSS flex-basis egenskap

Referens:CSS flex-direction egenskap

Referens:CSS flex-flow egenskap

Referens:CSS flex-grow egenskap

Referens:CSS flex-shrink egenskap

Referens:CSS flex-wrap egenskap

Referens:HTML DOM flex-egenskap

Exempel

Oavsett innehållet, gör alla elastiska projektets längd lika:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
flex-grow Siffra, som anger projektets ökning jämfört med andra elastiska projekt.
flex-shrink Siffra, som anger projektets minskning jämfört med andra elastiska projekt.
flex-basis

Projektets längd.

Gyldiga värden: "auto"、"inherit" eller värden i enheter som "%", "px", "em" eller andra längdenheter.
auto Ekvivalent med 1 1 auto.
initial Ekvivalent med 0 1 auto. Se: initial.
none Ekvivalent med 0 0 auto.
inherit Inheriterar egenskapen från föräldrelementet. Se: inherit.

Tekniska detaljer

Standardvärde: 0 1 auto
Arv: Nej
Animation tillverkning: Stöd. Se tilldelade egenskaper. Se:Animation relaterade egenskaper.
Version: CSS3
JavaScript-syntax: object.style.flex="1"

Mer exempel

Använd flex och mediaqueries för att skapa olika layouter för olika skärmstorlekar/enheter:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* Responsiv layout - Skapa en enkel kolumnlayout (100%) istället för en tvåkolumnslayout (50%) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

Prova själv

Webbläsarstöd

Siffrorna i tabellen anger den första webbläsarversionen som fullständigt stöder egenskapen.

Siffror med -webkit-、-ms- eller -moz- som prefix indikerar den första versionen som använder prefikset.

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