网硕互联帮助中心一、效果预览（3 种布局截图说明）
二、前置准备
三、核心知识点梳理（新手必看）
在开始布局实战前，先明确两个核心布局模块的作用，避免后续混淆：
- 一维布局（只能沿水平或垂直单个方向排列元素）
- 适用场景：导航栏、列表、居中对齐、侧边栏 + 主体等简单布局
- 核心属性：display: flex（开启弹性布局）、justify-content（主轴对齐）、align-items（交叉轴对齐）、flex: 1（子元素自适应剩余空间）
- 二维布局（同时控制水平和垂直方向，可实现多行多列网格）
- 适用场景：卡片列表、表单布局、整个页面的大框架划分
- 核心属性：display: grid（开启网格布局）、grid-template-columns（定义列数与列宽）、grid-gap（网格间距）、grid-auto-rows（自动定义行高）
四、分步实现（3 种布局逐一拆解，附代码块）
步骤 1：实现 移动端单列布局（基础入门，Flex 实现）
这种布局是移动端页面的基础，结构简单，重点掌握元素的垂直排列与自适应。
<!DOCTYPE html>
<html lang=\”zh-CN\”>
<head>
<meta charset=\”UTF-8\”>
<!– 关键：设置视口，开启移动端适配，避免页面缩放异常 –>
<meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”>
<title>移动端单列布局</title>
<link rel=\”stylesheet\” href=\”style.css\”>
</head>
<body>
<!– 头部 –>
<header class=\”header\”>移动端单列布局 – 头部导航</header>
<!– 主体内容 –>
<main class=\”main\”>
主体内容区域（自适应屏幕高度，超出部分可滚动）<br>
测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
</main>
<!– 底部 –>
<footer class=\”footer\”>底部版权信息 – 2026 前端实战</footer>
</body>
</html>
/* 初始化样式：清除默认边距，统一盒模型 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 让 body 占满整个屏幕高度，开启 Flex 垂直布局 */
body {
height: 100vh; /* 100vh = 视口高度的100% */
display: flex;
flex-direction: column; /* 改为垂直方向排列（默认是水平） */
}
/* 头部
评论前必须登录！
注册