CSS min-inline-size egenskap

Föregående sida min-block-size
Nästa sida min-height

Definition och användning

min-inline-size Egenskapen specificerar det minsta måttet för elementet i radinriktningen.

Om innehållet är mindre än minsta storlek i inreledsriktningen, då tillämpas min-inline-size egenskapsvärdet.

Om innehållet är större än minsta storlek i inreledsriktningen, då min-inline-size egenskapsvärdet fungerar inte.

Observera:relaterade CSS-egenskaper writing-mode Definierar inreledsriktningen, vilket påverkar min-inline-size resultatet av egenskapen. För engelska sidor är blockriktningen neråt och inreledsriktningen är från vänster till höger.

CSS min-inline-size egenskaper är relaterade till CSS-egenskapen min-height och min-width Mycket lik, men min-inline-size Egenskapen är beroende av inreledsriktningen.

Exempel

Exempel 1

Sätt minsta storlek för inreledsriktningen för <div>-elementet till 200 pixlar:

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

Prova själv

Exempel 2: Skrivmodus

Sätt <div>-elementets writing-mode När egenskapsvärdet sätts till vertical-rl, ändras inreledsriktningen från sidled till nerled, vilket påverkar hur min-inline-size-egenskapen fungerar:

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

Prova själv

Exempel 3: min-inline-size och inline-size

Observera ett inline-size För <div>-element med 200px storlek och en annan min-inline-size Följande är olika beteenden för <div>-element med 200px storlek vid förändring av innehållsstorlek:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde	Beskrivning
auto	Standard. Elementets standard min-inline-size-värde.
length	Använd fast enhet (t.ex. px, pt, cm) för att specificera minsta storlek. Se till:CSS units.
%	Använd procent för att specificera minsta storlek, relativt till föräldrelementets storlek på motsvarande axel.
initial	Sätt detta egenskap till dess standardvärde. Se till: initial.
inherit	Följande är att ärva detta egenskap från föräldrelementet. Se till: inherit.

Tekniska detaljer

Standardvärde:	auto
Ärvning:	Nej
Animeringsproduktion:	Stöd. Se till:Animeringsrelaterade egenskaper.
Version:	CSS3
JavaScript-syntax:	object.style.minInlineSize="10px"