CSS max-inline-size ominaisuus

Edellinen sivu max-height
Seuraava sivu max-width

Määrittely ja käyttö

max-inline-size Ominaisuus määrittää elementin enimmäiskoon rivejä suunnassa.

Jos sisällön koko rivejä suunnassa on pienempi kuin enimmäiskoko, max-inline-size Ominaisuuden arvo ei vaikuta.

Jos sisällön koko rivejä suunnassa on suurempi kuin enimmäiskoko, sovelletaan max-inline-size Ominaisuuden arvo.

Huomaa:Liittyvät CSS-ominaisuudet writing-mode Määrittää rivejä suunnan, mikä vaikuttaa: max-inline-size tulokset. Englanninkielisillä sivuilla lohko-akseli on alas ja rivejä suunta on vasemmalta oikealle.

CSS max-inline-size Ominaisuus CSS-ominaisuuksien max-height ja max-width Vähän erilainen, mutta max-inline-size Ominaisuus riippuu rivejä suunnasta.

Esimerkki

Esimerkki 1

Aseta <div>-elementin enimmäiskoko 60 pikseliin:

div {
  max-inline-size: 60px;
}

Kokeile itse

Esimerkki 2: Kirjoitusmalli

Aseta <div>-elementin writing-mode Kun ominaisuuden arvo on vertical-rl, rivejä suuntaa muuttuu sivulta alas, mikä vaikuttaa: max-inline-size Ominaisuuden toimintatapa:

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

Kokeile itse

Esimerkki 3: Max-inline-size vs Inline-size

Tarkkaile <div>-elementtiä (inline-size ja toisella <div>-elementillä (max-inline-size Eri reaktiot 100px:llä (

#div1 {
  max-inline-size: 100px;
}
#div2 {
  inline-size: 100px;
}

Kokeile itse

CSS-kieli

max-inline-size: auto|length|initial|inherit;

Ominaisuuden arvo

Arvo	Kuvaus
auto	Oletus. Elementin oletusarvo max-inline-size.
length	Käytä px, pt, cm jne. yksiköitä. Katso:CSS yksiköt.
%	Määritä prosenttiosuus suhteessa vanhemman elementin vastaavaan akseliin.
initial	Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit	Perii tämän ominaisuuden vanhemmalta elementiltä. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo:	auto
Perinnäisyys:	Ei
Animaation tekeminen:	Tuki. Katso:Animaatiot ja niiden ominaisuudet.
Versio:	CSS3
JavaScript-kieli:	object.style.maxInlineSize="60px"