CSS - min-inline-size屬性：初學者指南
你好，未來的CSS大師們！今天，我們將踏上一段令人興奮的旅程，探索CSS的世界，特別是深入了解min-inline-size屬性。別擔心如果你是新手；我會成為你的友好導遊，我們將一步步解決這個主題。在本教程結束時，你將能像專業人士一樣熟練使用這個屬性！
min-inline-size是什麼？
在我們深入之前，讓我們先了解min-inline-size到底意味著什麼。想像一下你正在為旅行打包，並且有一個可以擴張的行李箱。min-inline-size就像設定那個行李箱主要尺寸的最小值。在網頁設計術語中，它設定了一個元素在其行內方向的最小尺寸。
現在，你可能會想，“行內方向是什麼？” 嗯，在大多數情況下，對於英語和類似語言，它是水平方向。但別擔心，我們稍後會進一步探討！
可能的值
讓我們看看我們可以在min-inline-size中使用哪些不同的值：
| 值 | 描述 |
|---|---|
<length> |
一個固定的長度，如 100px 或 2em
|
<percentage> |
父容器大小的百分比 |
max-content |
內容的固有偏好大小 |
min-content |
內容的固有最小大小 |
auto |
瀏覽器決定最小大小 |
如果這些現在對你來說看起來令人困惑，別擔心。我們將通過範例探索每一個！
適用範圍
min-inline-size屬性可以應用於所有元素，除了：
- 行內非替換元素
- 表格行
- 行組
語法
min-inline-size的基本語法非常簡單：
min-inline-size: <value>;讓我們深入一些範例，看看這在實踐中是如何工作的！
CSS min-inline-size - 值
讓我們從一個使用固定長度的簡單範例開始：
<div class="box">這是一個將min-inline-size設定為200px的盒子。</div>.box {
min-inline-size: 200px;
background-color: lightblue;
padding: 10px;
}在這個範例中，我們告訴瀏覽器：“嘿，無論如何，不要讓這個盒子變得窄於200像素。” 如果您調整瀏覽器窗口的大小，您會看到盒子維持其最小寬度200px，即使您試圖使其變得更小。
CSS min-inline-size - 值
現在，讓我們試試使用百分比值：
<div class="container">
<div class="box">這個盒子將min-inline-size設定為50%。</div>
</div>.container {
width: 400px;
background-color: lightyellow;
padding: 10px;
}
.box {
min-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}在這種情況下，我們說：“確保這個盒子始終至少與其父容器的寬度一樣大。” 盒子將至少寬200px（400px的50%），但需要時可以變得更大。
CSS min-inline-size - max-content 值
max-content值非常有意思。它將最小尺寸設置為內容的偏好大小。讓我們看看它在實際中的運作：
<div class="box max-content">這個盒子會擴展以適合其內容。</div>
<div class="box fixed">這個盒子有固定的寬度150px。</div>.box {
background-color: lightpink;
padding: 10px;
margin-bottom: 10px;
}
.max-content {
min-inline-size: max-content;
}
.fixed {
width: 150px;
}max-content盒子會擴展以使所有內容在同一行上，而固定寬度的盒子可能會導致文字換行。
CSS min-inline-size - 與垂直文字一起使用
現在，讓我們來看看真正有趣的地方！記得上次我說行內方向通常是水平的嗎？嗯，這並不總是這樣。讓我們看一個垂直文字的範例：
<div class="vertical-text">這是垂直文字！</div>.vertical-text {
writing-mode: vertical-rl;
min-inline-size: 100px;
background-color: lavender;
padding: 10px;
}在這種情況下，因為我們改變了writing-mode為垂直，所以min-inline-size實際上控制的是盒子的最小高度，而不是寬度！
結論
就是这样，各位！我們已經從上到下（或者應該說，從左到右？）探索了min-inline-size屬性。記住，CSS就是關於實驗的。不要害怕嘗試這些屬性並看看會發生什麼。我們都是這樣學會的！
在我們結束之前，這裡有一個來自我多年教學經驗的小貼士：總是考慮你的設計在不同屏幕尺寸上的行為。min-inline-size屬性可以是創建響應式設計的有力工具，這些設計在從手機到寬屏顯示器上都看起來很棒。
繼續練習，繼續探索，最重要的是，用CSS玩得開心！誰知道呢？下一個令人驚艷的網站設計可能就來自你對min-inline-size的實驗！
Credits: Image by storyset