💓 博客主页：瑕疵的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

避坑总结

1. 父容器必须有高度
   没 height/min-height，align-items等于白写。
   调试时先给父容器加border: 1px solid red，看实际尺寸。

2. align-items和justify-content别搞混

   • 横向布局（flex-direction: row）：
     justify-content控水平，align-items控垂直
   • 纵向布局（flex-direction: column）：
     justify-content控垂直，align-items控水平

3. align-self只能写在子元素
   别在父容器写！比如.nav-item { align-self: center; }才对。

4. 子元素有 margin 会干扰对齐
   试试给子元素加margin: 0，避免边距导致偏移。

搞定后我喝了口冰美式，终于不骂娘了。
Flexbox不是玄学，就是你漏了那行高度。
下次再崩，先看父容器高度——别再当憨憨了。