Style flex eigenschap

Definitie en gebruik

flex Stelt de lengte van het item in, ten opzichte van de andere flexibele items binnen dezelfde container.

flex De eigenschap is een verkorte eigenschap van de eigenschappen flexGrow, flexShrink en flexBasis.

Opmerking:Als het element geen flexibel item is, dan flex Eigenschap ongeldig.

Zie ook:

CSS referentiemanual:flex eigenschap

HTML DOM STYLE referentiemanual:flexBasis eigenschap

HTML DOM STYLE referentiemanual:flexDirection eigenschap

HTML DOM STYLE referentiemanual:flexFlow eigenschap

HTML DOM STYLE referentiemanual:flexGrow eigenschap

HTML DOM STYLE referentiemanual:flexShrink eigenschap

HTML DOM STYLE referentiemanual:flexWrap eigenschap

Voorbeeld

Maak de lengte van alle flexibele items gelijk, ongeacht hun inhoud:

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

Probeer het zelf uit

Syntaxis

Geef de flex eigenschap terug:

object.style.flex

Stel de flex eigenschap in:

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

Eigenschapswaarde

Waarde Beschrijving
flex-grow Een getal dat de vergrotingshoeveelheid van het item ten opzichte van andere flexibele items regelt.
flex-shrink Een getal dat de verkleiningshoeveelheid van het item ten opzichte van andere flexibele items regelt.
flex-basis

De lengte van het item.

Geldige waarden: "auto", "inherit", of waarden met een eenheid van "%", "px", "em", of elke andere lengte-eenheid.
auto Gelijk aan 1 1 auto.
initial Gelijk aan 0 1 auto. Raadpleeg initial.
none Gelijk aan 0 0 auto.
inherit Inheritere deze eigenschap van de ouder element. Raadpleeg inherit.

Technische details

Standaardwaarde: 0 1 auto
terugkeerwaarde: een tekenreeks die de flex eigenschap.
CSS versie: CSS3

Browser ondersteuning

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support 11.0 Support 9.0 Support