CSS min-inline-size 屬性

定義和用法

min-inline-size 屬性指定元素在行內方向上的最小尺寸。

如果內容在行內方向上的尺寸小于最小尺寸，則將應用 min-inline-size 屬性值。

如果內容在行內方向上的尺寸大于最小尺寸，則 min-inline-size 屬性值不起作用。

注意：相關的 CSS 屬性 writing-mode 定義了行內方向，這會影響 min-inline-size 屬性的結果。對于英文頁面，塊方向是向下，而行內方向是從左到右。

CSS min-inline-size 屬性與 CSS 屬性 min-height 和 min-width 非常相似，但 min-inline-size 屬性依賴于行內方向。

實例

例子 1

將 <div> 元素在行內方向上的最小尺寸設置為 200 像素：

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

親自試一試

例子 2：書寫模式

將 <div> 元素的 writing-mode 屬性值設置為 vertical-rl 時，行內方向從側向變為向下，這會影響 min-inline-size 屬性的工作方式：

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

親自試一試

例子 3：min-inline-size 與 inline-size

觀察一個 inline-size 為 200px 的 <div> 元素和另一個 min-inline-size 為 200px 的 <div> 元素在內容尺寸變化時的不同表現：

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

親自試一試

CSS 語法

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

屬性值

技術細節

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

相關頁面

參考：CSS inline-size 屬性

參考：CSS max-inline-size 屬性

參考：CSS min-height 屬性

參考：CSS min-width 屬性

參考：CSS writing-mode 屬性