Flexbox 的属性来来回回就那十几个，但很多人（包括当年的我）看完文档还是不会做布局。我的经验是：少背多练。下面是我当年做过的十类练习，挑核心的讲思路。

三道必练

水平垂直居中：父元素 display:flex; justify-content:center; align-items:center，这一道覆盖了主轴交叉轴的概念，值得练到形成肌肉记忆。

导航栏两端对齐：logo 在左、菜单在右，justify-content:space-between 即可；中间需要留白时用 margin-left:auto 比空 div 优雅得多。

等高卡片列表：flex 容器里的项目默认 stretch 等高，配合 flex:1 控制宽度比例，三栏布局一行代码搞定。

新手最常踩的坑

分不清 justify-content 和 align-items 管哪根轴——记住主轴看 flex-direction；flex:1 是 flex-grow/shrink/basis 的简写，别只背 1。

建议把这十道题在空白文件里手写三遍，比看十篇教程都管用。