因为卡片内容天然垂直排列，column更贴合语义和视觉流；用gap实现子元素等距分隔最干净稳定，避免margin合并与维护成本。
个人信息卡片为什么用 flex-direction: column 而不是 row
因为卡片内容天然垂直排列：头像在上、姓名居中、简介和标签在下——column 更贴合语义和视觉流，避免用 margin 或 padding 生硬分隔。若强行用 row，就得额外包裹多层容器来“转成竖排”，反而增加嵌套和维护成本。
实操建议：
- 根容器设
display: flex+flex-direction: column，再配align-items: center让所有子元素水平居中 - 头像用
width/height固定尺寸，配合border-radius: 50%，别依赖aspect-ratio（旧版 Safari 不支持） - 姓名和简介用
text-align: center备份，防某些 Flex 对齐在 inline 元素上失效
如何让头像和文字之间留出“呼吸感”而不靠猜 margin
Flex 的 gap 是最干净的解法：它只作用于直接子元素之间的空隙，不干扰内外边距逻辑，也不会触发 margin 合并。比手动写 margin-bottom 稳定得多，尤其当卡片内容动态增减时。
实操建议：
- 在 flex 容器上加
gap: 1rem（或16px），头像→姓名→简介→标签自动等距分隔 - 如果需要顶部/底部留白更大，单独给首尾元素加
margin-top或margin-bottom，别动gap - 注意
gap在 Firefox 旧版本（-moz- 前缀，但如今可基本忽略
标签组（skills）横向排列却要居中对齐，怎么避免换行错位
常见错误是给标签父容器设 display: flex + justify-content: center，但没限制子标签的宽度或换行行为，导致长标签撑宽整行、短标签被挤到下一行还偏左。
实操建议：
- 标签父容器用
display: flex+flex-wrap: wrap+justify-content: center，允许换行且居中 - 每个标签加
margin: 0.25rem，用gap也行，但gap对换行后的对齐控制更弱 - 标签本身设
white-space: nowrap防文本折行，再用max-width: 120px+overflow: hidden+text-overflow: ellipsis控制溢出
响应式断点下，从竖排切到横排卡片时对齐突然错乱
问题常出在：小屏用 column，大屏切 row，但没同步调整 align-items 和 justify-content 的语义角色——比如 column 下 align-items: center 是水平居中，换成 row 后它就变成“交叉轴居中”（即垂直居中），容易让头像上下浮动。
实操建议：
- 大屏切换
flex-direction: row时，把align-items改成flex-start或center，按需选；同时加align-content: flex-start防多行内容错位 - 头像区域单独包一层
div并设align-self: flex-start，确保它不随整体交叉轴对齐规则浮动 - 用
@container替代媒体查询更精准，但目前仅 Chromium 119+ 支持，稳妥起见仍用@media (min-width: 768px)
Flex 布局真正的难点不在属性本身，而在于交叉轴和主轴在不同 flex-direction 下的角色反转——改方向时，务必重新检查 align-* 类属性的作用对象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
