CSS Flexbox 弹性布局入门：轻松实现导航栏与卡片排列（新手避坑）

很多刚学网页开发的朋友，写HTML能出内容，一让元素并排就抓瞎，float 浮动调半天还错位。其实现代布局有个更省事的方案：CSS Flexbox 弹性布局。今天老陈带你从零搞懂它，顺手做出导航栏和卡片墙，比 float 清爽太多。

一、Flexbox 到底解决了什么问题

传统布局靠 float 和定位，做个水平居中、等高两列特别费劲，代码又臭又长。Flexbox 是一维布局模型，把容器变成弹性盒子，里面的子元素自动排列、对齐、分配空间，过去几十行的活几行就搞定。

• 一维布局：要么横排要么竖排，专注一条轴
• 主轴和交叉轴两个方向都能单独控制
• 子项能自动伸缩，把剩余空隙瓜分干净

二、两个核心角色：容器和项目

先记牢两个角色。给父元素写 display: flex，它就成了弹性容器；它的直接子元素自动变成弹性项目。所有排列规则都围着这两个角色转，别搞混层级。

• 容器：设了 display:flex 的那个盒子
• 项目：容器里的直接子元素
• 只管直接子层，孙子层不受 flex 影响

三、4个最常用属性先记住

• justify-content：主轴对齐，居中用 center
• align-items：交叉轴对齐，垂直居中靠它
• flex-direction：横排 row 还是竖排 column
• flex: 1：让项目按比例瓜分剩余空间

四、实战：两分钟做出导航栏

给 nav 设 display:flex，再 justify-content: space-between，左边logo右边菜单就自动分开了；菜单项之间用 gap 控制间距，比 float 清爽太多。

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav a { margin-left: 20px; }

五、实战：一行代码铺卡片墙

卡片容器设 display:flex 再加 flex-wrap: wrap，每张卡片给固定宽度，超出自动换行，整齐又自适应。配合手机端改 flex-direction 就能竖排，响应式不用重写。

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card { width: 200px; }

六、新手最容易踩的3个坑

• 忘了给父级 display:flex，子项还是块级排不下去
• 把 margin:auto 当万能，其实 justify-content 更精准
• 手机端没加 flex-wrap，卡片挤成一条被压变形

老陈总结

Flexbox 是现代网页布局的基本功，比 float 好用十倍。今天你就做一件事：新建一个 html，照上面两段代码敲一遍，把导航栏和卡片墙做出来，再用浏览器把窗口拉窄看自适应效果。卡住了把现象发我，老陈帮你改。想继续学，关注老陈，下期讲 Grid 二维布局怎么玩。