CSS 项目实战怎么做？3 个适合新手的布局练习

CSS 是前端开发里最容易「一看就会，一写就废」的技术。学完选择器、盒模型、Flexbox 之后，最快巩固的办法就是做布局项目。好的 CSS 项目实战有 3 个特征：视觉反馈即时、能覆盖常用布局模式、改一个属性就能看懂变化。本文给你 3 个这样的练习：卡片列表、响应式导航栏、Flex 居中面板。

这 3 个项目都不需要 JavaScript，只用 HTML 和 CSS 就能完成。每个项目对应一种最常见的布局场景：等宽卡片列表、响应式导航、全屏居中。你做完这三个，再遇到类似的布局需求，脑海里会立刻浮现出对应的 CSS 方案。

一、为什么从项目学 CSS

单独看 display: flex、justify-content、align-items，你可能记住了语法，但不知道怎么组合。放进项目里，它们立刻有了目的：

• flex-wrap 让卡片在小屏上自动换行；
• justify-content: space-between 让导航链接左右分布；
• align-items: center 让图标和文字垂直居中。

项目还会逼你处理真实问题：为什么设置了宽度还是溢出？为什么高度不生效？为什么不同浏览器显示不一样？这些坑只有在写真实布局时才会遇到。

和完整 CSS教程 相比，项目实战是「用中学」。你不需要先把所有属性背熟，而是边查边做，做完再回头补原理。

二、选项目的 3 个原则

新手选 CSS 项目不要贪复杂，记住三条：

不要一上来就复刻电商首页，先从三五个盒子开始，理解它们怎么排列。遇到属性记不住的情况，CSS3 教程 里有比较完整的属性说明和示例，适合边做边查。

CSS 的项目练习和编程项目不同，它的反馈是视觉上的。所以每个项目完成后，建议你故意改几个属性值，比如把 justify-content 改成 flex-start、space-around、center，观察盒子排列的变化。这种「破坏性尝试」是理解 Flexbox 最快的方式。

三、项目一：卡片列表

目标：用 Flexbox 实现一行 N 个卡片，窗口变窄时自动换行，卡片之间有统一间距。

<div class="card-list">
  <div class="card">卡片 1</div>
  <div class="card">卡片 2</div>
  <div class="card">卡片 3</div>
</div>

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}


.card {
  flex: 1 1 200px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

核心知识点：flex-wrap、gap、flex-basis。flex: 1 1 200px 表示卡片可以伸缩，但基础宽度是 200px，所以窗口窄时会自动换行。

这个布局还有一个常见变体：让最后一行不足 N 个的卡片左对齐而不是拉伸。实现方法是在列表末尾添加几个透明的占位元素，或者改用 Grid 布局的 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))。等你跑通 Flex 版本后，可以用 Grid 重写一次，体会两种布局方案的区别。 做卡片列表时，还有一个细节容易被忽略：图片的宽高比。如果卡片里有图片，建议给图片容器设置固定宽高，并用 object-fit: cover 防止图片拉伸变形。这个属性和 Flexbox 配合，能做出非常稳定的响应式卡片。

四、项目二：响应式导航栏

目标：桌面端导航链接水平排列，移动端变成汉堡菜单或可换行的垂直布局。

<nav class="navbar">
  <div class="logo">w3cschool</div>
  <ul class="nav-links">
    <li><a href="#">首页</a></li>
    <li><a href="#">课程</a></li>
    <li><a href="#">笔记</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #fe6a00;
}


.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}


@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav-links {
    flex-direction: column;
    gap: 12px;
  }
}

核心知识点：Flex 主轴与交叉轴对齐、@media 媒体查询、响应式断点。注意移动端不要只把元素变小，而要重新排列结构。

真实项目中，移动端导航往往还需要一个汉堡菜单。你可以在这个项目基础上加一个按钮，点击时切换 .nav-links 的 display 属性。这个扩展会用到一点点 JavaScript，但能让你理解「响应式不只是屏幕宽度变化，还包括交互状态变化」。

响应式导航还有一个更优雅的做法：不显示所有链接，而是在小屏幕上把它们收进一个下拉菜单。这需要用 JavaScript 监听按钮点击，切换一个类名来控制菜单的显示和隐藏。CSS 负责动画和样式，JS 负责状态，两者分工清晰。

五、项目三：Flex 居中面板

目标：让一个登录框在页面正中间，无论窗口大小怎么变都保持居中。

<div class="center-box">
  <div class="panel">
    <h2>登录</h2>
    <input placeholder="用户名" />
    <input placeholder="密码" type="password" />
    <button>提交</button>
  </div>
</div>

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f5f5f5;
}


.panel {
  width: 320px;
  padding: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

核心知识点：justify-content: center、align-items: center、min-height: 100vh。这是面试和项目中最常用的居中方案之一。

居中面板还有很多变体：让面板内部的内容也垂直排列、给面板加阴影和圆角、让面板在移动端占满宽度但在桌面端保持固定宽度。这些变体都不需要新属性，只是对现有属性的组合练习。另一个值得尝试的方向是暗色模式：用 CSS 变量定义颜色和背景，通过 prefers-color-scheme 媒体查询自动切换，这个项目能让你体会到现代 CSS 在主题管理上的便利性。 居中方案不止 Flex 一种。Grid 也能实现完美居中，而且代码更短：place-items: center 一行就能同时搞定水平和垂直居中。你可以用这个项目对比一下 Flex 和 Grid 两种写法，理解它们各自擅长的场景。

总结

CSS 项目实战的关键不是复刻复杂页面，而是把单个布局模式练熟。卡片列表练 Flex 换行，导航栏练响应式，居中面板练对齐。三个项目做下来，你看到设计稿时会更清楚该用什么属性实现。

要点带走：

• 每个项目只攻一种布局模式；
• Flexbox 能解决 80% 的日常布局；
• 移动端要先调结构，再调大小。

下一步打开浏览器开发者工具，挑一个项目边改属性边看效果，直到完全理解每个属性的作用。

CSS 的学习曲线在于「属性组合」而不是「单个属性」。同一个 justify-content，在不同父容器、不同 flex-direction 下效果完全不同。通过这三个项目反复调整属性，你会逐渐形成对布局的直觉，遇到新设计稿时也能更快判断该用 Flex 还是 Grid。

延伸学习

1. 想系统学属性，CSS 入门课程 从选择器讲到布局，适合零基础；
2. 居中总搞不定，CSS 水平垂直居中 一文讲清 4 种常用方案；
3. 写样式想偷懒，CSS 代码生成器 可以帮你快速生成常用代码片段。

常见问题

Q：Flexbox 和 Grid 先学哪个？
A：先学 Flexbox。它能解决 80% 的一维和简单二维布局，Grid 适合更复杂的网格系统。

Q：为什么设置了高度却不生效？
A：可能是父元素没有高度，或者子元素被浮动、定位影响了。先用 Flex 布局通常能避免这类问题。

Q：响应式断点设多少合适？
A：新手先记两个：768px（平板）和 480px（手机），后续再根据需要细化。