图片验证码：
差点被一个 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的孩子们均分空间。”
示例说明
假设有个简单的布局：
