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