在前端页面布局的发展中，css3推出的伸缩布局（flexbox）彻底解决了传统浮动、定位布局的对齐难题，如今已经成为前端开发最常用的布局方案，尤其在适配移动端多尺寸屏幕的场景下优势十分明显。

伸缩布局的核心概念

伸缩布局的核心是分为伸缩容器和伸缩项目两层结构，为父元素设置`display: flex`属性后，父元素就成为伸缩容器，其所有直接子元素自动成为伸缩项目，无需额外修改子元素属性即可触发布局规则。伸缩布局依靠两条轴控制项目排列：默认是水平方向的主轴，以及垂直于主轴的交叉轴，开发者可以通过属性修改轴的方向，适配不同的排列需求。

伸缩容器常用属性梳理

控制布局方向的`flex-direction`属性，可将主轴改为垂直方向，快速实现纵向排列需求；`justify-content`属性控制项目在主轴上的对齐方式，常用值包括居中`center`、两端留白均匀的`space-around`、两端顶对齐中间留白均匀的`space-between`，能轻松实现不同的排版需求；`align-items`属性控制项目在交叉轴的对齐，只需给容器添加`align-items: center`，就能实现单行项目的垂直居中，这在传统布局中需要大量额外代码才能实现；`flex-wrap`属性控制项目溢出是否换行，默认不换行，开启`flex-wrap: wrap`后，项目超出容器宽度会自动换行适配不同屏幕。

伸缩项目常用属性与实战价值

伸缩项目中最常用的是`flex`属性，它是`flex-grow`、`flex-shrink`、`flex-basis`三个属性的缩写，开发中最常用的`flex: 1`，代表项目自动放大占满容器剩余空间，在三栏布局、通栏导航等场景中，只需要给中间自适应区域设置`flex: 1`，即可完成自适应，比传统布局减少了大量尺寸计算。

目前现代浏览器对伸缩布局的兼容性已经接近100%，导航栏均匀排列、商品卡片自适应排列、垂直居中弹窗、移动端整屏布局都可以通过伸缩布局快速实现，能大幅提升前端布局的开发效率。全文约657字。