Style flex egenskap

Definition och användning

flex Ställer in eller returnerar projektets längd, jämfört med de andra elastiska projekten inom samma container.

flex Egenskapen är en förkortning för egenskaperna flexGrow, flexShrink och flexBasis.

Kommentar:Om elementet inte är ett elastiskt element, då flex Egenskapen är ogiltig.

Se också:

CSS Referenshandbok:flex egenskap

HTML DOM STYLE Referenshandbok:flexBasis egenskap

HTML DOM STYLE Referenshandbok:flexDirection egenskap

HTML DOM STYLE Referenshandbok:flexFlow egenskap

HTML DOM STYLE Referenshandbok:flexGrow egenskap

HTML DOM STYLE Referenshandbok:flexShrink egenskap

HTML DOM STYLE Referenshandbok:flexWrap egenskap

Exempel

Låt alla elastiska elementens längd vara lika, oavsett deras innehåll:

for (i = 0; i < y.length; i++) {
  y[i].style.flex = "1";
}

Prova själv

Syntaks

Returnera flex egenskap:

object.style.flex

Ställ in flex egenskap:

object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"

Egenskapsvärde

Värde Beskrivning
flex-grow Nummer som anger hur mycket projektet ökar jämfört med andra elastiska projekt.
flex-shrink Nummer som anger hur mycket projektet minskar jämfört med andra elastiska projekt.
flex-basis

Projektets längd.

Giltiga värden: "auto", "inherit", eller värden med enheter som "%", "px", "em", eller andra längdenheter.
auto Liknar 1 1 auto.
initial Liknar 0 1 auto. Se initial.
none Liknar 0 0 auto.
inherit Följer från föräldrelementet för denna egenskap. Se inherit.

Tekniska detaljer

Standardvärde: 0 1 auto
Returvärde: string som anger elementets flex egenskap.
CSS version: CSS3

Browserversioner

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd 11.0 Stöd 9.0 Stöd