Flexbox 布局能够让我们在不同的设备上轻松地创建灵活的布局。然而，当子元素的内容变化时，它们的宽度也会随之变化，这不是我们希望看到的。在一些情况下，我们需要子元素的宽度保持不变，这文章将介绍如何实现这一点。
1. flex-basis 属性
最简单的方法是设置 flex-basis 属性。这个属性让我们能够设置子元素的初始宽度，这样子元素的宽度就不会随着内容的变化而改变了。
下面是一个例子：
---- ------------------ ---- ----------------------- ---- ----------------------- ------ ------- ---------- - -------- ----- - ----- - ----- - - ----- - ------ - ----------- ------ - --------
在这个例子中，我们设置了一个叫做 .fixed 的类，宽度为 100 像素。我们将这个类应用到了第一个子元素上，而第二个子元素的宽度则会根据内容自适应。
2. max-width 属性
另一种方法是使用 max-width 属性。这个属性可以让我们设置子元素的最大宽度，一旦子元素的内容超过这个最大宽度，它们就会自动换行。
下面是一个例子：
---- ------------------ ---- ----------------------- ---- ----------------------- ------ ------- ---------- - -------- ----- - ----- - ----- - - ----- - ------ - ---------- ------ - --------
在这个例子中，我们设置了一个叫做 .fixed 的类，最大宽度为 100 像素。我们将这个类应用到了第一个子元素上，而第二个子元素的宽度则会根据内容自适应。
3. min-width 属性
min-width 属性可以实现同样的效果，只不过是设置子元素的最小宽度。
下面是一个例子：
---- ------------------ ---- ----------------------- ---- ----------------------- ------ ------- ---------- - -------- ----- - ----- - ----- - - ----- - ------ - ---------- ------ - --------
在这个例子中，我们设置了一个叫做 .fixed 的类，最小宽度为 100 像素。我们将这个类应用到了第一个子元素上，而第二个子元素的宽度则会根据内容自适应。
结论
本文介绍了三种在 Flexbox 布局中实现子元素的固定宽度的方法：flex-basis、max-width 和 min-width。不同的方法适用于不同的情况，可以根据实际需要进行选择。
希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671d9d7b9babaf620fb7367e