做前端的人大多被 float 折磨过：清除浮动、margin 塌陷、垂直居中要靠各种 hack。Flexbox 出来后，这些老坑基本可以进博物馆了，但很多人还停留在会用 display:flex 的程度。
最常用的第一招是居中。父级 display:flex 加上 justify-content:center 和 align-items:center，子元素水平和垂直同时居中，再也不用算 top 和 transform。弹窗、按钮组、空状态提示全靠它。
第二招是两端对齐。导航栏左侧 logo 右侧菜单，用 justify-content:space-between 一行搞定。卡片列表里最后一行的留白，用 space-between 或 gap 控制间距，比 float 加百分比稳得多。
第三招是换行与占比。flex-wrap:wrap 让子项空间不够时自动换行，flex:1 让多个子项等分剩余空间，配合固定宽度的侧边栏能轻松做出后台布局。gap 属性还能统一控制间距，告别 margin 互相踩。
移动端适配上，Flex 配合媒体查询可以平滑地让横向排列在窄屏变成纵向堆叠，不用写一堆 float 覆盖。我们重构过一个老后台，把满屏 float 换成 Flex 后，响应式断点从十几处降到三处，维护轻松一大截。
如果项目里响应式要求高，廷云信息一般会建议你用 Flex 做骨架、Grid 做二维复杂区域，各取所长。比如商品卡片网格用 Grid，卡片内部的标题和价格对齐用 Flex，结构最清晰。
如果项目里响应式要求高，廷云信息一般会建议你用 Flex 做骨架、Grid 做二维复杂区域，各取所长。比如商品卡片网格用 Grid，卡片内部的标题和价格对齐用 Flex，结构最清晰。
把常用的布局组合沉淀成组件，下次直接复用，既统一风格又省时间。
新项目建议直接在脚手架里内置一套 Flex 工具类，布局时直接拼类名，少写重复 CSS。老项目可以渐进迁移，不必一次性重写，风险可控，团队也能慢慢适应新写法。