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; }
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; }
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; }
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
- Edellinen sivu min-block-size
- Seuraava sivu min-height