博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》Flexbox对齐搞错布局全崩手把手教你避坑目录兄弟们昨晚写个导航栏Flexbox对齐直接给我整吐了。子元素明明想垂直居中结果全挤在顶部。控制台没报错但页面像被狗啃过——文字歪斜图标乱跳气得我差点把键盘扔了。核心根源不是Flexbox的锅是我自己犯蠢align-items必须配合父容器高度生效。默认父容器高度是 auto子元素高度不够对齐直接失效。更坑的是我误以为align-self能全局生效结果写在父容器上。错误代码你以为这样就能居中结果全崩.nav-container{display:flex;align-items:center;/* 以为加了就完事 *//* 没高度父容器高度子元素高度 */}.nav-item{width:60px;height:40px;background:#3498db;}正确代码加高度对齐瞬间稳了.nav-container{display:flex;align-items:center;height:80px;/* 关键必须给高度 *//* 或用 min-height: 80px */}.nav-item{width:60px;height:40px;background:#3498db;}对比关键点错误父容器高度未定义 →align-items失效正确父容器固定高度 →align-items立刻生效补充如果父容器高度不确定用min-height替代height避坑总结父容器必须有高度没 height/min-heightalign-items等于白写。调试时先给父容器加border: 1px solid red看实际尺寸。align-items和justify-content别搞混横向布局flex-direction: rowjustify-content控水平align-items控垂直纵向布局flex-direction: columnjustify-content控垂直align-items控水平align-self只能写在子元素别在父容器写比如.nav-item { align-self: center; }才对。子元素有 margin 会干扰对齐试试给子元素加margin: 0避免边距导致偏移。搞定后我喝了口冰美式终于不骂娘了。Flexbox不是玄学就是你漏了那行高度。下次再崩先看父容器高度——别再当憨憨了。
