CSS joustava-kasvuominaisuus

Määritelmä ja käyttö

flex-shrink ominaisuus on kiinnitetty samaan konttiin, ja kohde supistuu suhteessa muihin joustaviin kohtiin.

Huomautus:Jos elementti ei ole joustava kohde, flex ominaisuus on voimaton.

Katso myös:

CSS oppitunnit: CSS joustavat ruudut

CSS viittomakirja:flex ominaisuus

CSS viittomakirja:flex-basis ominaisuus

CSS viittomakirja:flex-direction ominaisuus

CSS viittomakirja:flex-flow ominaisuus

CSS viittomakirja:flex-grow ominaisuus

CSS viittomakirja:flex-wrap ominaisuus

HTML DOM viittomakirja:flexShrink ominaisuus

Esimerkki

Tekee toisen joustavan kohteen supistuvaksi kolme kertaa suuremmaksi kuin muut kohteet:

div:nth-of-type(2) {
  flex-shrink: 3;
}

Kokeile itse

CSS syntaksi

flex-shrink: number|initial|inherit;

Ominaisuuden arvo

Arvo Kuvaus
number Luku, joka määrittää kohteen suhteellisen supistumismäärän muihin joustaviin kohtiin. Oletusarvo on 1.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Tämä ominaisuus perittyy vanhemmalta elementiltä. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: 1
Perintä: Ei
Animaation tekeminen: Tuki. Katso:Animaatioon liittyvät ominaisuudet.
Versio: CSS3
JavaScript syntaksi: object.style.flexShrink="5"

Selaimen tuki

Taulukossa olevat numerot ilmoittavat ensimmäisestä selaimesta, joka tukee ominaisuutta täysin.

Numerot, jotka sisältävät -webkit- tai -moz-, osoittavat ensimmäistä versiota, jossa etuliite käytetään.

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