Flex布局入门：CSS新手建个人主页教程

这篇文章为CSS新手提供了一条高效、现代的个人主页开发捷径——直接从Flex布局入手，摒弃过时的浮动和复杂定位，通过语义化HTML结构（header/main/footer）结合flex-direction: column、flex: 1和min-height: 100vh等核心技巧，轻松实现响应式、垂直流式、内容自适应且footer始终粘底的页面骨架；文中还手把手演示了如何用Flex快速完成头部导航对齐、技能标签自动换行等实用效果，强调“先定主轴方向，再控对齐方式”的清晰逻辑，让零基础读者也能在极短时间内构建出专业、灵活、无需JavaScript的个人主页。

直接从 Flex 布局开始做个人主页，是最高效、最现代的入门路径。不用先学浮动、定位这些过时或复杂的方式，Flex 天然适合构建响应式、居中、等高、自适应的页面骨架。

一、先写一个最简 HTML 骨架

别一上来就堆内容，先搭出“容器-区域”的基本结构：

• 用
  放头图/标题
• 用
  放简介、技能、项目等核心内容
• 用

每个区域都设 class（比如 class="section"），方便后续统一用 Flex 控制。

二、给 body 或 wrapper 设 display: flex + 方向

把整个页面看成一列垂直布局：

• 推荐写法： 给包裹所有内容的父容器（比如 或一个
  ）加 display: flex; flex-direction: column;
• 这样 header、main、footer 就自动从上到下排列，且默认撑满宽度
• 如果想让 main 区域占满剩余高度（比如 header 固定高、footer 粘底），给 main 加 flex: 1;

三、在每个区域内用 Flex 排子元素

比如在