1. 了解 Flexbox 布局
Flexbox 布局是 CSS3 新增的一种布局方式，旨在为开发人员提供更加便捷的布局方式，尤其在移动端上更是得到广泛应用。
在 Flexbox 布局中，容器和项目是两个核心概念。容器是包含项目的父元素，而项目则是容器中的子元素。Flexbox 布局主要通过设置容器的属性来实现对项目的布局控制。
常见的 Flexbox 布局属性包括：flex-direction、justify-content、align-items 等。了解这些属性将对我们理解如何实现固定宽度和自适应宽度并存有很大的帮助。
2. 实现固定宽度和自适应宽度并存
在实际开发中，我们经常会遇到需要在一个容器中同时实现固定宽度和自适应宽度的情况。这时我们可以通过以下两种方式来实现：
2.1 利用 flex-grow 属性
我们可以使用 flex-grow 属性将剩余的空间分配给项目。当为一个项目设置了 flex-grow 属性时，该项目将获得剩余空间的一部分。flex-grow 属性值越大，项目获得的剩余空间就越多。
以下是一个示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- ---------------------------- ---- ------------------------------ ------ ------- ---------- - -------- ----- ---------------- -------------- - ----- - ------ ------ ----------------- ----- - ------ - ---------- -- ----------------- ----- - --------
在上面的代码中，我们设置了一个父容器和两个子元素，父容器采用 flex 布局，子元素采用 space-between 方式水平排列，左侧子元素设置了固定宽度为 100px，右侧子元素通过设置 flex-grow: 1 来实现自适应宽度。这样，右侧子元素就会自动占据剩余的空间。
2.2 利用 flex-basis 属性
另外，我们还可以使用 flex-basis 属性来实现固定宽度和自适应宽度并存。flex-basis 属性用来设置项目的初始主轴尺寸。如果设置了 flex-basis 属性，那么项目就会变成一个固定宽度的盒子。
以下是一个示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- ----------------------------- ---- ----------------------------- ------ ------- ---------- - -------- ----- ---------------- -------------- - ------ - ----------- ------ ----------------- ----- - ----- - ----------- -- ---------- -- ----------------- ----- - --------
在这个例子中，我们同样设置了一个父容器和两个子元素，父容器采用 flex 布局，子元素采用 space-between 方式水平排列，左侧子元素设置了 flex-basis: 100px，即固定宽度 100px，右侧子元素通过设置 flex-basis: 0 和 flex-grow: 1 来实现自适应宽度。这样，两个子元素就可以在一个容器中同时并存了。
3. 总结
在实现固定宽度和自适应宽度并存的 Flexbox 布局中，我们可以利用 flex-grow 和 flex-basis 属性来实现。如何选择使用哪种方式取决于具体情况，我们在实际开发中可以根据需求进行选择。了解这些属性的概念和用法，将有助于我们更好地理解和掌握 Flexbox 布局，提高代码效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1d883f6b2d6eab3d18b78