网页布局是前端开发的核心基础，合理运用css布局技术可以快速实现各类页面结构，满足不同场景的展示需求。目前主流的css布局方案包括flex布局、grid布局、浮动布局和定位布局，每种方案都有对应的适用场景和实现逻辑。
一、flex布局实现一维排列
flex布局是弹性盒子布局，适合处理一维方向的元素排列，比如横向导航栏、纵向列表等场景，核心是通过给父容器设置display:flex来开启弹性布局。
1.1 横向导航栏实现
横向导航栏是网页中最常见的布局之一，使用flex布局可以轻松实现元素横向排列、居中对齐等效果，代码如下：
/* 导航栏父容器样式 */
.nav-container {
display: flex;
/* 子元素横向排列 */
flex-direction: row;
/* 子元素水平居中 */
justify-content: center;
/* 子元素垂直居中 */
align-items: center;
height: 60px;
background-color: #f5f5f5;
padding: 0 20px;
}
/* 导航项样式 */
.nav-item {
margin: 0 15px;
font-size: 16px;
color: #333;
text-decoration: none;
}
/* 鼠标悬停效果 */
.nav-item:hover {
color: #1890ff;
}对应的html结构如下：
<div class="nav-container">
<a href="/" class="nav-item">首页</a>
<a href="/news" class="nav-item">新闻</a>
<a href="/product" class="nav-item">产品</a>
<a href="/about" class="nav-item">关于我们</a>
</div>1.2 等分布局实现
如果需要让子元素在一行内等分宽度，只需要给子元素设置flex:1即可，父容器开启flex布局后，子元素会自动分配剩余空间：
.equal-container {
display: flex;
height: 100px;
}
.equal-item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
/* 给不同项设置不同背景色区分 */
.equal-item:nth-child(1) {
background-color: #ff6b6b;
}
.equal-item:nth-child(2) {
background-color: #4ecdc4;
}
.equal-item:nth-child(3) {
background-color: #ffe66d;
}二、grid布局实现二维网格
grid布局是网格布局，适合处理二维方向的元素排列，比如卡片网格、后台管理页面的整体框架等，通过划分行和列来定义网格结构。
2.1 卡片网格布局实现
常见的商品卡片、文章卡片网格可以用grid布局快速实现，只需要定义列数和间距即可：
.card-grid {
display: grid;
/* 定义3列，每列等宽 */
grid-template-columns: repeat(3, 1fr);
/* 行间距20px，列间距20px */
gap: 20px;
padding: 20px;
}
.card {
height: 200px;
background-color: #f0f0f0;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #666;
}对应的html结构如下：
<div class="card-grid">
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
<div class="card">卡片4</div>
<div class="card">卡片5</div>
<div class="card">卡片6</div>
</div>2.2 后台管理页面框架布局
后台管理页面通常包含顶部导航、侧边栏、主体内容区域，用grid布局可以一次性定义整体结构：
.admin-layout {
display: grid;
/* 顶部60px，侧边栏200px，主体自适应 */
grid-template-rows: 60px 1fr;
grid-template-columns: 200px 1fr;
/* 定义区域名称 */
grid-template-areas:
"header header"
"sidebar main";
height: 100vh;
}
.admin-header {
grid-area: header;
background-color: #001529;
color: #fff;
display: flex;
align-items: center;
padding: 0 20px;
}
.admin-sidebar {
grid-area: sidebar;
background-color: #f7f7f7;
padding: 20px;
}
.admin-main {
grid-area: main;
padding: 20px;
background-color: #f0f2f5;
}三、浮动布局实现图文环绕
浮动布局是传统的css布局方式，虽然现在flex和grid更常用，但在图文环绕场景中依然有使用价值，通过float属性让元素脱离文档流向左或向右浮动。
图文环绕的实现代码如下：
.article-container {
padding: 20px;
line-height: 1.6;
}
.article-img {
/* 图片向左浮动 */
float: left;
width: 200px;
height: 150px;
margin-right: 15px;
margin-bottom: 10px;
background-color: #ddd;
}
.article-text {
color: #333;
font-size: 15px;
}对应的html结构如下：
<div class="article-container">
<img src="https://ipipp.com/sample.jpg" class="article-img" alt="示例图片" />
<div class="article-text">
这里是文章的文本内容，图片会向左浮动，文字会自动环绕在图片的右侧和下方，这种布局适合新闻详情页、博客文章页等场景，能够提升内容的可读性和版面的美观度。当文字内容足够多时，会自动填充图片周围的空间，不需要额外调整布局结构。
</div>
</div>四、定位布局实现固定位置元素
定位布局通过position属性控制元素的位置，适合实现固定导航栏、悬浮按钮、弹窗等需要脱离正常文档流的元素。
固定顶部导航栏的实现代码如下：
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex;
align-items: center;
padding: 0 20px;
z-index: 999;
}
/* 给主体内容加顶部内边距，避免被固定导航栏遮挡 */
.page-content {
padding-top: 60px;
height: 2000px;
background-color: #f5f5f5;
}布局方案选择建议
不同布局方案适用场景不同，可以根据需求选择：
- 一维方向的排列、对齐需求，优先选择flex布局，代码简洁适配性好
- 二维网格类的布局，比如卡片网格、整体页面框架，优先选择grid布局
- 图文环绕场景，使用浮动布局可以快速实现效果
- 需要固定位置、悬浮的元素，使用定位布局实现
实际项目中也可以组合使用多种布局方案，比如整体用grid划分页面框架，内部导航栏用flex实现，悬浮按钮用定位实现，灵活搭配才能更高效地完成布局需求。