什么是 Flexbox 布局
Flexbox 是 CSS3 新增的一种布局模式，也叫伸缩布局。它可以让容器中的元素能够更加高效、灵活地布局，从而适应不同的屏幕尺寸和设备。
Flexbox 主要解决的问题是在容器中，以行或列的方式展示不同尺寸的元素。它提供了一种简单而强大的方式来创建灵活且自适应的布局，比传统的 CSS 布局方式更加方便且易于使用。
左右固定，中间自适应布局的实现
假设我们有一个布局，左边固定宽度为 200px，右边固定宽度为 300px，中间自适应布局。那么该如何使用 Flexbox 实现呢？
一、设置容器样式
首先，将布局放在一个容器中，设置其样式：
.container {
display: flex;
}这个容器将使用 Flexbox 布局方式，所有子元素都将成为 Flexbox 的项目（即 Flex Items）。
二、设置左侧固定宽度
将左侧固定为 200px，设置其宽度为 200px 即可：
.left {
width: 200px;
}三、设置右侧固定宽度
将右侧固定为 300px，设置其宽度为 300px 和 margin-left: auto 即可：
.right {
width: 300px;
margin-left: auto;
}这个 margin-left: auto 将会把该元素推到容器的最右边。
四、设置中间自适应宽度
设置中间所有自适应元素的 flex-grow 属性即可，该属性表示元素的扩展比例。如果您希望中间自适应部分的宽度占据剩余的所有宽度，那么可以使用 flex-grow: 1：
.middle {
flex-grow: 1;
}现在，整个布局就结束了，所有元素都已被正确地定位。
示例代码
<div class="container"> <div class="left">我是左边的固定部分</div> <div class="middle">我是中间的自适应部分</div> <div class="right">我是右边的固定部分</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ------ ------ - ------ - ------ ------ ------------ ----- - ------- - ---------- -- -
指导意义
使用 Flexbox 布局可以轻松实现不同场景中的布局需求，不需要过多计算和修改样式。在设计自适应布局时，Flexbox 的优势尤为明显。
总结起来，Flexbox 布局的优点包括：
- 简单易用：不需要过多计算和修改样式。
- 自适应：元素可以根据容器的尺寸灵活地调整自己的尺寸和位置。
- 兼容性好：虽然 IE8 及以下版本不支持，但其他主流浏览器都完美支持。
- 动画效果：控制项目的顺序、延迟、速度等样式可以创建很多新鲜的动画效果。
因此，掌握 Flexbox 布局的基本应用和原理，是每个前端开发人员的必备技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66500b4ad3423812e4207eeb