Flexbox

Flexbox 解决了什么

在 Flexbox 出现之前，垂直居中是 CSS 的经典难题：要么用 line-height 等 hack，要么用绝对定位计算偏移量，条件一变就失效。Flexbox 只需三行：display:flex; align-items:center; justify-content:center，立刻完美居中，且父元素尺寸怎么变都能自适应。

Flexbox 规范经历了漫长的演进，2009-2012 年之间语法改了三次（display:box、display:flexbox、display:flex），旧文章里的写法到现在可能早已废弃。当前语法的浏览器全面支持大约从 2015 年起，IE10/11 有一些 bug，2022 年 IE 退役后彻底没有历史包袱。[1]

主轴与交叉轴

理解 Flexbox 的关键是搞清楚主轴（main axis）和交叉轴（cross axis）的概念。flex-direction 决定主轴方向（row 或 column），justify-content 沿主轴对齐，align-items 沿交叉轴对齐。

• flex-grow / flex-shrink / flex-basis：三合一属性，控制子元素如何分配剩余空间，简写 flex:1 等价于 flex: 1 1 0%
• flex-wrap：默认 nowrap 不换行，wrap 让超出的子元素自动另起一行
• gap：Flexbox 从 2020 年起支持 gap 属性，终于不需要用 margin 模拟间距了