CSS min-inline-size ominaisuus

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.

Tekninen tarkistus

Oletusarvo: auto
Perintä: Ei
Animaation tekeminen: Tuki. Katso:Animaatiot.
Versio: CSS3
JavaScript-kieli: object.style.minInlineSize="10px"

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen täysin tukevan selaimen version.

Chrome Edge Firefox Safari Opera
57.0 79.0 41.0 12.1 44.0

Tiedotusvaihe

Viittaus:CSS inline-size ominaisuus

Viittaus:CSS max-inline-size ominaisuus

Viittaus:CSS min-height ominaisuus

Viittaus:CSS min-width ominaisuus

Viittaus:CSS writing-mode ominaisuus