差点被一个 div 气炸。

大家都经历过那种布局几乎没问题的夜晚：

侧边栏安稳地摆在那里，头部也端正得体，可某个区域却突然像家宴上闹情绪的弟弟，硬是不肯听话。

无论怎么调宽度、最小宽度，还是用calc(100% - 某值)，甚至向 CSS 神明献上了缺失的分号……布局就是不肯对齐。

这时，突然想起一个久违的老朋友：

flex: 1;
瞬间，一切归位，完美无缺。

没有多余的 div， 没有复杂的数字计算， 只有简洁优雅的一行 CSS。

flex: 1 究竟有何魔力？
大家可能都用过display: flex，也调过justify-content、align-items，但flex: 1是那种在布局“耍脾气”时，真正救命的神奇简写。

来简单拆解一下：

flex-grow: 1：允许该子元素扩展，占据剩余空间；

flex-shrink: 1：当空间不足时，允许收缩；

**flex-basis: 0%**：初始大小为 0，根据剩余空间调整尺寸。

通俗点说：

“浏览器，给所有设了flex: 1的孩子们均分空间。”

示例说明
假设有个简单的布局：

<divclass="container"> <divclass="sidebar">固定宽度侧边栏</div> <divclass="main">主内容区</div> </div>
给侧边栏设置固定宽度，给主内容区加上flex: 1：

.container{ display: flex; } .sidebar{ width:200px; } .main{ flex:1; }
结果是，主内容区自动填满除侧边栏外的剩余空间，无需再用calc()或复杂的 JS 计算宽度。

简洁、高效，并且兼容主流现代浏览器。

额外推荐：object-fit: cover同样功不可没
说到布局救星，图片处理也不能忽视。

如果遇到图片在容器里变形拉伸的尴尬，

object-fit:cover;
能帮你智能裁剪和缩放图片，保证容器被填满的同时，保持图片的长宽比不变。

非常适合头像、横幅、缩略图等视觉展示。

总结
遇到布局难题，别急着上 javascript，或一头扎进复杂的 Grid 布局。

很多时候，只需一行 CSS：

flex: 1让布局灵活分配空间，

object-fit: cover让图片美观大方。

这些被低估的 CSS 技巧，才是让 UI 清爽、开发心情舒畅的幕后英雄。