前言
在前端开发中，页面布局是至关重要的一部分。而在页面布局中，经常需要实现固定宽度和自适应宽度混排的效果。如何实现这种效果呢？本文将会介绍采用 Flexbox 布局来实现固定宽度和自适应宽度混排的方法。
什么是 Flexbox 布局
Flexbox 布局是一种基于“弹性盒子”概念的 CSS3 布局模式，可以很简单地实现常见布局，比如居中、分布、平均分布等等。
用 Flexbox 布局可以很方便地解决一些传统布局所不能实现的问题，如动态垂直居中、自适应布局等，非常适用于页面、组件等的布局。
具体的用法可以参考文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
实现方式
使用 Flexbox 布局实现固定宽度和自适应宽度混排的方法其实很简单，大致步骤如下：
- 对父元素设置
display: flex，这将会把父元素变成“弹性盒子”。 - 对弹性盒子中的每一个子元素进行宽度的设置。
- 对需要自适应宽度的元素设置
flex: 1，这个属性是让这个元素自适应剩余容器的宽度，而非被固定的宽度撑开。
下面是一个简单的实现示例：
-- -------------------- ---- ------- ------- ---------- - -------- ----- ---------------- -------------- - ------ - ------ ------ ------- ------ ----------------- ---- - ----- - ----- -- ------- ------ ----------------- ----- - -------- ---- ------------------ ---- ------------------------ ---- ------------------------ ------展开代码
上述代码中，我们定义了一个 container 的容器，并设置了其为 display: flex; 样式，这个样式将会把该容器变成一个弹性盒子。
接下来，我们在容器内部定义了两个元素，一个是固定宽度的 fixed，它的宽度是 100px，另外一个是自适应宽度的 auto，我们使用 flex: 1; 把这个元素的自适应宽度属性设置为 1。
这样，我们就实现了一个固定宽度和自适应宽度混排的布局方式。运行代码，你将会看到如下的展示效果：
快捷方式
Flexbox 布局有一个特殊的属性称为 flex-wrap，它能够用于在弹性布局中自动排列多行或单行元素。
因此，如果你希望让一个固定宽度和自适应宽度混排的列表在自动换行时保持自适应宽度，那么只需要在弹性盒子上设置 flex-wrap: wrap; 属性即可。
下面是带 flex-wrap 属性的实现示例：
-- -------------------- ---- ------- ------- ---------- - -------- ----- ---------- ----- - ------ - ------ ------ ------- ------ ----------------- ---- ------- ---- - ----- - ----- -- ------- ------ ----------------- ----- ------- ---- - -------- ---- ------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ---- ------------------------ ------展开代码
上述代码中，我们通过设置 flex-wrap: wrap; 将弹性布局的子元素放置到多行中。同样，我们在 .fixed 和 .auto 样式中设置了 margin 属性，用于调整元素与元素之间的间距，增加可读性。
这样，我们就实现了一个带 flex-wrap 属性的固定宽度和自适应宽度混排的列表。运行代码，你将看到如下的展示效果：
结束语
至此，我们已经介绍了使用 Flexbox 布局实现固定宽度和自适应宽度混排的方法，同时，也提供了带 flex-wrap 属性的自动换行列表的实现示例。希望能对你的前端开发工作有所参考和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c83064e46428fe9ee61812
