直接从flex布局入手做个人主页最高效，用语义化html结构（header/main/footer）配合flex-direction:column、flex:1和min-height:100vh实现响应式粘底布局。
直接从 Flex 布局开始做个人主页，是最高效、最现代的入门路径。不用先学浮动、定位这些过时或复杂的方式，Flex 天然适合构建响应式、居中、等高、自适应的页面骨架。
一、先写一个最简 HTML 骨架
别一上来就堆内容，先搭出“容器-区域”的基本结构：
- 用
放头图/标题 - 用
ain> 放简介、技能、项目等核心内容 - 用
放联系方式或版权信息
每个区域都设 class（比如 class="tuc-19bc10f7-173544-0 section tuc-19bc10f7-173544-0"），方便后续统一用 Flex 控制。
二、给 body 或 wrapper 设 display: flex + 方向
把整个页面看成一列垂直布局：
立即学习“前端免费学习笔记（深入）”；
- 推荐写法： 给包裹所有内容的父容器（比如
或一个）加display: flex; flex-direction: column;- 这样 header、main、footer 就自动从上到下排列，且默认撑满宽度
- 如果想让 main 区域占满剩余高度（比如 header 固定高、footer 粘底），给
main加flex: 1;三、在每个区域内用 Flex 排子元素
比如在
里放 logo 和导航栏：
- 给 header 加
display: flex; justify-content: space-between; align-items: center; - 左边放 logo，右边放 nav，垂直居中对齐，间距自动分配
- 在
里放“技能标签”，可以加display: flex; flex-wrap: wrap; gap: 8px;实现自动换行+留白
四、小技巧：用 min-height: 100vh 让页面至少满屏
避免内容少时 footer 上浮：
- 给最外层容器（如
.page或body）加min-height: 100vh; - 配合
flex-direction: column和main { flex: 1; }，就能实现真正的“footer 粘底” - 不需要 js，不依赖固定高度，适配各种屏幕
不复杂但容易忽略：Flex 是单方向布局模型，一次只处理主轴或交叉轴。先定
flex-direction，再用justify-content（主轴）和align-items（交叉轴）控制对齐，逻辑就清晰了。