Flexbox 是 CSS 布局的主力，但很多人对主轴（main axis）、交叉轴（cross axis）总搞混。这篇用一张图讲透。

一容器，两条轴

给父元素设 display: flex，子元素沿主轴排列，交叉轴垂直方向对齐。

.container {
  display: flex;
  flex-direction: row;   /* 主轴 = 水平 */
  /* column 则主轴 = 垂直 */
}

主轴相关

属性作用
justify-content主轴方向分布（start / center / space-between / space-around）
flex-grow子元素按比例瓜分剩余空间
flex-shrink空间不足时按比例收缩

交叉轴相关

属性作用
align-items交叉轴对齐（stretch / center / flex-start / flex-end）
align-self单个子元素覆盖对齐

换行

.flex-wrap {
  display: flex;
  flex-wrap: wrap;      /* 允许换行 */
  gap: 12px;            /* 行列间距，现代浏览器都支持 */
}

结论

记住一句话：justify-content 管主轴，align-items 管交叉轴。剩下的 flex-grow/shrink 是「空间怎么分」的问题，多写几次自然就通了。