仅用于站内搜索，没有排版格式，具体信息请跳转上方微信公众号内链接
来源|大迁世界
作者|前端小智
差点被一个div气炸。
大家都经历过那种布局几乎没问题的夜晚：
侧边栏安稳地摆在那里，头部也端正得体，可某个区域却突然像家宴上闹情绪的弟弟，硬是不肯听话。
无论怎么调宽度、最小宽度，还是用calc(100%-某值)，甚至向CSS神明献上了缺失的分号……布局就是不肯对齐。
这时，突然想起一个久违的老朋友：
瞬间，一切归位，完美无缺。
没有多余的div，没有复杂的数字计算，只有简洁优雅的一行CSS。
大家可能都用过display:flex，也调过justify-content、align-items，但flex:1是那种在布局“耍脾气”时，真正救命的神奇简写。
来简单拆解一下：
flex-grow:1：允许该子元素扩展，占据剩余空间；
flex-shrink:1：当空间不足时，允许收缩；
**flex-basis:0%**：初始大小为0，根据剩余空间调整尺寸。
通俗点说：
“浏览器，给所有设了flex:1的孩子们均分空间。”
假设有个简单的布局：
给侧边栏设置固定宽度，给主内容区加上flex:1：
结果是，主内容区自动填满除侧边栏外的剩余空间，无需再用calc()或复杂的JS计算宽度。
简洁、高效，并且兼容主流现代浏览器。
说到布局救星，图片处理也不能忽视。
如果遇到图片在容器里变形拉伸的尴尬，
能帮你智能裁剪和缩放图片，保证容器被填满的同时，保持图片的长宽比不变。
非常适合头像、横幅、缩略图等视觉展示。
遇到布局难题，别急着上JavaScript，或一头扎进复杂的Grid布局。
很多时候，只需一行CSS：
flex:1让布局灵活分配空间，
object-fit:cover让图片美观大方。
这些被低估的CSS技巧，才是让UI清爽、开发心情舒畅的幕后英雄。
好啦，今天的内容分享就到这，感觉不错的同学记得分享点赞哦！
PS：程序员好物馆持续分享程序员学习、面试相关干货，不见不散！
点分享
点收藏
点点赞
点在看
