CSS - max-inline-size屬性：初學者指南

你好，未來的CSS大師們！今天，我們將要深入探索max-inline-size屬性的精彩世界。如果你是個新手，別擔心；我將會是你這次CSS冒險中的友好導遊。那麼，來一杯咖啡（或者如果你喜歡，來一杯茶），我們開始吧！

CSS - Max Inline Size

max-inline-size是什麼？

在我們深入細節之前，讓我們先來了解一下max-inline-size是什麼。想像你試著把一個非常長的單詞塞進一個小盒子裡。這就是max-inline-size在CSS中幫助我們解決的問題。它設定了元素在行內方向的最大尺寸。

“但等等，”你可能會問，“行內方向是什麼？”問得好！在英語和許多其他語言中，行內方向是水平的 - 從左到右。然而，在一些像阿拉伯語或希伯來語這樣的語言中，它是從右到左。而在垂直書寫模式中，它甚至可以是從上到下！

現在，讓我們來看看我們可以在max-inline-size中使用哪些不同的值。這裡有一個方便的表格給你：

值	描述
`<length>`	一個固定的長度，如`300px`或`20em`
`<percentage>`	包含塊大小的百分比
`none`	尺寸無限制（這是默認值）
`max-content`	內容的固有不偏好尺寸
`min-content`	內容的固有不最小尺寸
`fit-content`	使用可用空間，但從不小於min-content，也從不大於max-content

如果現在有些值對你來說看起來有些混亂，別擔心。我們將通過範例來探索每一個！

max-inline-size屬性適用於所有元素，除了：

max-inline-size的基本語法非常直接：

max-inline-size: value;

簡單吧？現在，讓我們深入一些特定的範例！

我們先從一個使用固定長度的簡單範例開始：

.box {
max-inline-size: 300px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
這是一個設定了max-inline-size為300px的盒子。如果內容超過這個寬度，它會換行。
</div>

在這個範例中，我們將max-inline-size設為300像素。這意味著無論我們在.box中放入多少內容，它都不會超出行內方向（在這個例子中是水平方向）的300px。如果內容太長，它會換到下一行。

現在，讓我們試試使用百分比值：

.container {
width: 500px;
border: 2px solid black;
}

.box {
max-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}

<div class="container">
<div class="box">
這個盒子的max-inline-size被設為其容器寬度的50%。
</div>
</div>

在這種情況下，.box將有最大行內尺寸為其容器寬度的50%。所以，如果容器寬度為500px，盒子永不會超過250px的寬度。

max-content值非常有趣。它將最大行內尺寸設為內容的偏好尺寸。讓我們看看它是如何工作的：

.box {
max-inline-size: max-content;
background-color: lightyellow;
padding: 10px;
}

<div class="box">
這個盒子會擴展以適合其內容，但除非被強制，否則不會換行。
</div>

使用max-content時，盒子會擴展以適合所有內容在同一行上，只有當它被強制（比如碰到視窗邊緣）時才會換行。

現在，來點不一樣的！讓我們看看max-inline-size如何與垂直文字一起工作：

.vertical-box {
writing-mode: vertical-rl;
max-inline-size: 100px;
background-color: lightpink;
padding: 10px;
}

<div class="vertical-box">
這些文字是垂直的，而max-inline-size限制了它的高度！
</div>

在這個範例中，我們使用了writing-mode: vertical-rl來讓文字垂直並從右到左。現在，max-inline-size實際上限制了盒子的高度，因為在垂直書寫模式中，行內方向是垂直的！

好了，各位！我們已經從頭到尾（或者應該說，從行內開始到行內結束？）探索了max-inline-size屬性。記住，CSS全是關於實驗的。不要害怕去試這些屬性，看看會發生什麼。我們都是這樣學習的！

在我讓你們離開之前，這裡有一個小笑話來幫你記住max-inline-size：為什麼CSS屬性要去健身房？當然是為了锻炼它的max-inline-size！

快樂編程，願你的佈局永遠靈活，你的內容永遠恰到好處！

Credits: Image by storyset