CSS min-inline-size ominaisuus

Edellinen sivu min-block-size
Seuraava sivu min-height

Määrittely ja käyttö

min-inline-size Määrittää elementin minimikoko riveittäin suuntaisesti.

Jos sisällön koko riviin suuntautuvassa akselissa on pienempi kuin pienin koko, min-inline-size ominaisuusarvo.

Jos sisällön koko riviin suuntautuvassa akselissa on suurempi kuin pienin koko, min-inline-size ominaisuusarvo ei vaikuta.

Huomaa:liittyviin CSS-ominaisuuksiin writing-mode Määrittää riviin suuntautuvan akselin, mikä vaikuttaa min-inline-size tulosten kanssa. Englanninkielisillä sivuilla lohko-akseli on alaspäin ja riviin suuntautuva akseli on vasemmalta oikealle.

CSS min-inline-size ominaisuudet ovat samanlaisia CSS-ominaisuuksien min-height ja min-width Erittäin samanlainen, mutta min-inline-size Ominaisuus riippuu riviin suuntautuvasta.

Esimerkki

Esimerkki 1

Aseta <div>-elementin riviin suuntautuva pienin koko 200 pikseeliin:

div {
  min-inline-size: 200px;
}

Kokeile itse

Esimerkki 2: Kirjoitusmalli

Aseta <div>-elementin writing-mode Kun ominaisuus arvo asetetaan vertical-rl, riviin suuntautuva suunta muuttuu sivuttaisesta alaspäin, mikä vaikuttaa min-inline-size-ominaisuuden toimintaan:

div {
  min-inline-size: 260px;
  writing-mode: vertical-rl;
}

Kokeile itse

Esimerkki 3: min-inline-size ja inline-size

Tarkastele yhtä inline-size 200px:n <div>-elementin ja toisen min-inline-size 200px:n <div>-elementin eri käyttäytyminen sisällön kokoon muuttuessa:

#div1 {
  min-inline-size: 200px;
}
#div2 {
  inline-size: 200px;
}

Kokeile itse

CSS-kieli

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

Ominaisuusarvo

Arvo	Kuvaus
auto	Oletus. Elementin oletus min-inline-size-arvo.
length	Määritä pienin koko kiinteillä yksiköillä (esim. px, pt, cm jne.). Katso:CSS yksiköt.
%	Määritä pienin koko prosentteina, suhteessa isäntäelementin kohtaisessa akselissa olevaan kokoon.
initial	Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit	Perii tämän ominaisuuden isältään. Katso: inherit.