pin_drop当前位置:知识文库 ❯ 图文
布局结构：HTML Flexbox布局 - 完整教程与代码示例
一、教程简介
Flexbox（弹性盒子布局）是CSS3引入的一种强大的一维布局模型，专门用于在容器中的项目之间分配空间、对齐和排列。Flexbox极大地简化了以往需要各种hack才能实现的布局效果，如垂直居中、等高列、灵活排列等。本教程将全面讲解Flexbox的核心概念、容器和项目属性、主轴与交叉轴的工作原理以及实际应用。
二、核心概念
Flexbox的基本模型
Flexbox由两个部分组成：Flex容器（父元素）和Flex项目（子元素）。
代码示例
Flex容器（display: flex）
+--------------------------------------------------+
| main-start main-end |
| +--------+ +--------+ +--------+ +--------+ |
| | Flex | | Flex | | Flex | | Flex | |
| | Item 1 | | Item 2 | | Item 3 | | Item 4 | |
| +--------+ +--------+ +--------+ +--------+ |
| ^ |
| cross-start cross-end |
+--------------------------------------------------+
主轴（Main Axis）：水平方向（默认）
交叉轴（Cross Axis）：垂直方向（默认）主轴与交叉轴
三、语法与用法
Flex容器属性
1. display - 定义Flex容器
代码示例
.flex-container {
display: flex; /* 块级Flex容器 */
display: inline-flex; /* 行内Flex容器 */
}2. flex-direction - 主轴方向
代码示例
.flex-container {
flex-direction: row; /* 水平从左到右（默认） */
flex-direction: row-reverse; /* 水平从右到左 */
flex-direction: column; /* 垂直从上到下 */
flex-direction: column-reverse; /* 垂直从下到上 */
}3. flex-wrap - 换行控制
代码示例
.flex-container {
flex-wrap: nowrap; /* 不换行（默认） */
flex-wrap: wrap; /* 换行 */
flex-wrap: wrap-reverse; /* 反向换行 */
}4. justify-content - 主轴对齐
代码示例
.flex-container {
justify-content: flex-start; /* 起点对齐（默认） */
justify-content: flex-end; /* 终点对齐 */
justify-content: center; /* 居中对齐 */
justify-content: space-between; /* 两端对齐，项目间等距 */
justify-content: space-around; /* 项目两侧等距 */
justify-content: space-evenly; /* 完全均匀分布 */
}5. align-items - 交叉轴对齐
代码示例
.flex-container {
align-items: stretch; /* 拉伸填满（默认） */
align-items: flex-start; /* 交叉轴起点对齐 */
align-items: flex-end; /* 交叉轴终点对齐 */
align-items: center; /* 交叉轴居中 */
align-items: baseline; /* 基线对齐 */
}6. align-content - 多行对齐
代码示例
.flex-container {
align-content: stretch; /* 拉伸填满 */
align-content: flex-start; /* 起点对齐 */
align-content: flex-end; /* 终点对齐 */
align-content: center; /* 居中 */
align-content: space-between;/* 两端对齐 */
align-content: space-around; /* 等距分布 */
}7. gap - 间距
代码示例
.flex-container {
gap: 10px; /* 行列间距都是10px */
row-gap: 10px; /* 行间距 */
column-gap: 20px; /* 列间距 */
}Flex项目属性
1. flex-grow - 放大比例
代码示例
.flex-item {
flex-grow: 0; /* 不放大（默认） */
flex-grow: 1; /* 等比例放大 */
flex-grow: 2; /* 放大比例为2 */
}2. flex-shrink - 缩小比例
代码示例
.flex-item {
flex-shrink: 1; /* 等比例缩小（默认） */
flex-shrink: 0; /* 不缩小 */
}3. flex-basis - 初始大小
代码示例
.flex-item {
flex-basis: auto; /* 根据内容自动（默认） */
flex-basis: 200px; /* 固定初始宽度 */
flex-basis: 30%; /* 百分比初始宽度 */
}4. flex - 简写属性
代码示例
.flex-item {
flex: 0 1 auto; /* 默认值：不放大、可缩小、自动宽度 */
flex: 1; /* 等同于 flex: 1 1 0% */
flex: auto; /* 等同于 flex: 1 1 auto */
flex: none; /* 等同于 flex: 0 0 auto */
flex: 0 0 200px; /* 固定200px，不放大不缩小 */
}5. align-self - 单个项目对齐
代码示例
.flex-item {
align-self: auto; /* 继承父元素align-items */
align-self: flex-start; /* 交叉轴起点 */
align-self: flex-end; /* 交叉轴终点 */
align-self: center; /* 交叉轴居中 */
align-self: stretch; /* 拉伸 */
}6. order - 排列顺序
代码示例
.flex-item {
order: 0; /* 默认顺序 */
order: -1; /* 排在前面 */
order: 1; /* 排在后面 */
}四、代码示例
示例1：Flexbox属性全演示
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox属性全演示</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "Microsoft YaHei", sans-serif;
background: #f5f5f5;
padding: 20px;
}
h2 {
color: #2c3e50;
margin-bottom: 15px;
font-size: 1.1rem;
}
.section {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.desc {
color: #666;
font-size: 13px;
margin-bottom: 15px;
}
/* 通用flex容器 */
.flex-demo {
display: flex;
padding: 10px;
background: #ecf0f1;
border-radius: 6px;
min-height: 80px;
}
.flex-demo .item {
padding: 10px 20px;
background: #3498db;
color: white;
border-radius: 4px;
font-size: 14px;
text-align: center;
}
/* justify-content演示 */
.jc-start { justify-content: flex-start; }
.jc-center { justify-content: center; }
.jc-end { justify-content: flex-end; }
.jc-between { justify-content: space-between; }
.jc-around { justify-content: space-around; }
.jc-evenly { justify-content: space-evenly; }
/* align-items演示 */
.ai-demo {
min-height: 120px;
}
.ai-start { align-items: flex-start; }
.ai-center { align-items: center; }
.ai-end { align-items: flex-end; }
.ai-stretch { align-items: stretch; }
.ai-stretch .item { height: auto; }
/* flex-direction演示 */
.fd-row { flex-direction: row; }
.fd-column { flex-direction: column; }
.fd-row-reverse { flex-direction: row-reverse; }
/* flex-wrap演示 */
.fw-demo { flex-wrap: wrap; }
.fw-demo .item { flex: 0 0 120px; }
/* gap演示 */
.gap-demo { gap: 10px; }
/* flex-grow演示 */
.grow-demo .item { flex-basis: auto; }
.grow-1 { flex-grow: 1; }
.grow-2 { flex-grow: 2; }
.grow-0 { flex-grow: 0; }
/* 居中演示 */
.center-demo {
height: 200px;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 8px;
}
.center-demo .item {
background: rgba(255,255,255,0.2);
padding: 20px 40px;
border-radius: 8px;
font-size: 18px;
}
.label {
display: inline-block;
background: #2c3e50;
color: white;
padding: 2px 8px;
border-radius: 3px;
font-size: 12px;
margin-bottom: 8px;
}
</style>
</head>
<body>
<div class="section">
<h2>1. justify-content - 主轴对齐</h2>
<div class="label">flex-start</div>
<div class="flex-demo jc-start">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>
<div class="label" style="margin-top:10px;">center</div>
<div class="flex-demo jc-center">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>
<div class="label" style="margin-top:10px;">space-between</div>
<div class="flex-demo jc-between">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>
<div class="label" style="margin-top:10px;">space-evenly</div>
<div class="flex-demo jc-evenly">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>
</div>
<div class="section">
<h2>2. align-items - 交叉轴对齐</h2>
<div class="label">flex-start</div>
<div class="flex-demo ai-demo ai-start">
<div class="item">1</div><div class="item" style="padding:20px;">2</div><div class="item">3</div>
</div>
<div class="label" style="margin-top:10px;">center</div>
<div class="flex-demo ai-demo ai-center">
<div class="item">1</div><div class="item" style="padding:20px;">2</div><div class="item">3</div>
</div>
<div class="label" style="margin-top:10px;">stretch</div>
<div class="flex-demo ai-demo ai-stretch">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>
</div>
<div class="section">
<h2>3. flex-direction - 主轴方向</h2>
<div class="label">row（默认）</div>
<div class="flex-demo fd-row">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>
<div class="label" style="margin-top:10px;">column</div>
<div class="flex-demo fd-column">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>
<div class="label" style="margin-top:10px;">row-reverse</div>
<div class="flex-demo fd-row-reverse">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>
</div>
<div class="section">
<h2>4. flex-grow - 放大比例</h2>
<div class="flex-demo grow-demo">
<div class="item grow-1">grow:1</div>
<div class="item grow-2" style="background:#e74c3c;">grow:2</div>
<div class="item grow-1" style="background:#27ae60;">grow:1</div>
</div>
<p class="desc">grow:2的项目占据的剩余空间是grow:1的两倍</p>
</div>
<div class="section">
<h2>5. flex-wrap + gap - 换行与间距</h2>
<div class="flex-demo fw-demo gap-demo">
<div class="item">1</div><div class="item">2</div><div class="item">3</div>
<div class="item">4</div><div class="item">5</div><div class="item">6</div>
</div>
</div>
<div class="section">
<h2>6. 完美居中</h2>
<div class="flex-demo center-demo">
<div class="item">水平+垂直居中</div>
</div>
<p class="desc">只需三行代码：display:flex + justify-content:center + align-items:center</p>
</div>
</body>
</html>示例2：Flexbox实战布局
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox实战布局</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "Microsoft YaHei", sans-serif;
background: #f0f2f5;
color: #333;
}
/* 页面框架 */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* 头部 */
.header {
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
position: sticky;
top: 0;
z-index: 100;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 12px 20px;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: #3498db;
}
.search-bar {
display: flex;
flex: 1;
max-width: 400px;
margin: 0 30px;
}
.search-bar input {
flex: 1;
padding: 8px 15px;
border: 2px solid #e0e0e0;
border-right: none;
border-radius: 20px 0 0 20px;
outline: none;
font-size: 14px;
}
.search-bar input:focus {
border-color: #3498db;
}
.search-bar button {
padding: 8px 20px;
background: #3498db;
color: white;
border: 2px solid #3498db;
border-radius: 0 20px 20px 0;
cursor: pointer;
font-size: 14px;
}
.user-actions {
display: flex;
align-items: center;
gap: 15px;
}
.user-actions a {
color: #666;
text-decoration: none;
font-size: 14px;
}
/* 主内容区 */
.main-content {
display: flex;
flex: 1;
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
gap: 20px;
width: 100%;
}
/* 侧边栏 */
.sidebar {
width: 250px;
flex-shrink: 0;
}
.sidebar-card {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.sidebar-card h3 {
color: #2c3e50;
margin-bottom: 15px;
font-size: 1rem;
}
.sidebar-card ul {
list-style: none;
}
.sidebar-card ul li {
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.sidebar-card ul li:last-child {
border-bottom: none;
}
.sidebar-card ul li a {
color: #555;
text-decoration: none;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.sidebar-card ul li a:hover {
color: #3498db;
}
/* 内容区 */
.content {
flex: 1;
}
/* 卡片列表 */
.card-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.article-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
display: flex;
}
.article-card .thumb {
width: 200px;
flex-shrink: 0;
background: #ddd;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 14px;
}
.article-card .info {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
}
.article-card .info h3 {
color: #2c3e50;
margin-bottom: 10px;
}
.article-card .info h3 a {
color: inherit;
text-decoration: none;
}
.article-card .info h3 a:hover {
color: #3498db;
}
.article-card .meta {
display: flex;
gap: 15px;
color: #999;
font-size: 13px;
margin-bottom: 10px;
}
.article-card .excerpt {
flex: 1;
color: #666;
font-size: 14px;
line-height: 1.6;
}
.article-card .tags {
display: flex;
gap: 8px;
margin-top: 10px;
}
.article-card .tags span {
padding: 2px 10px;
background: #f0f2f5;
border-radius: 12px;
font-size: 12px;
color: #666;
}
/* 页脚 */
.footer {
background: #2c3e50;
color: #aaa;
text-align: center;
padding: 20px;
font-size: 14px;
}
/* 响应式 */
@media (max-width: 768px) {
.main-content {
flex-direction: column;
}
.sidebar {
width: 100%;
}
.article-card {
flex-direction: column;
}
.article-card .thumb {
width: 100%;
height: 150px;
}
.search-bar {
display: none;
}
}
</style>
</head>
<body>
<div class="page">
<header class="header">
<div class="header-inner">
<div class="logo">FlexBlog</div>
<div class="search-bar">
<input type="text" placeholder="搜索文章...">
<button>搜索</button>
</div>
<div class="user-actions">
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</div>
</header>
<div class="main-content">
<aside class="sidebar">
<div class="sidebar-card">
<h3>分类</h3>
<ul>
<li><a href="#">前端开发</a></li>
<li><a href="#">后端技术</a></li>
<li><a href="#">移动开发</a></li>
<li><a href="#">DevOps</a></li>
</ul>
</div>
<div class="sidebar-card">
<h3>热门标签</h3>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">React</a></li>
</ul>
</div>
</aside>
<main class="content">
<div class="card-list">
<article class="article-card">
<div class="thumb">缩略图</div>
<div class="info">
<h3><a href="#">深入理解Flexbox布局模型</a></h3>
<div class="meta">
<span>作者：张三</span>
<span>2026-04-22</span>
<span>阅读 256</span>
</div>
<p class="excerpt">Flexbox是CSS3中最重要的布局模型之一，它提供了一种更高效的方式来排列、对齐和分配容器中项目之间的空间。</p>
<div class="tags">
<span>CSS</span>
<span>Flexbox</span>
<span>布局</span>
</div>
</div>
</article>
<article class="article-card">
<div class="thumb" style="background:#bdc3c7;">缩略图</div>
<div class="info">
<h3><a href="#">响应式设计最佳实践</a></h3>
<div class="meta">
<span>作者：李四</span>
<span>2026-04-20</span>
<span>阅读 189</span>
</div>
<p class="excerpt">响应式设计不仅仅是媒体查询，它是一种设计理念，需要从布局、图片、交互等多个维度综合考虑。</p>
<div class="tags">
<span>响应式</span>
<span>移动优先</span>
</div>
</div>
</article>
<article class="article-card">
<div class="thumb" style="background:#95a5a6;">缩略图</div>
<div class="info">
<h3><a href="#">CSS Grid与Flexbox的选择</a></h3>
<div class="meta">
<span>作者：王五</span>
<span>2026-04-18</span>
<span>阅读 142</span>
</div>
<p class="excerpt">Grid和Flexbox并非互斥，它们各自擅长不同的布局场景。理解它们的区别和适用场景，才能做出正确的选择。</p>
<div class="tags">
<span>Grid</span>
<span>Flexbox</span>
<span>对比</span>
</div>
</div>
</article>
</div>
</main>
</div>
<footer class="footer">
<p>Copyright 2026 FlexBlog. All rights reserved.</p>
</footer>
</div>
</body>
</html>五、浏览器兼容性
IE兼容性处理
代码示例
/* IE10/11的已知问题及修复 */
/* 1. min-height问题：IE中flex容器的min-height不生效 */
.flex-container {
min-height: 100vh;
display: flex;
}
/* 修复：使用height替代 */
.flex-container {
height: 100vh; /* IE回退 */
min-height: 100vh;
}
/* 2. flex-basis忽略问题 */
.flex-item {
flex: 1 1 auto;
/* IE中可能需要显式设置width */
width: 0; /* 配合flex:1使用 */
}六、注意事项与最佳实践
1. Flex简写的使用
代码示例
/* 推荐：使用flex简写 */
.item {
flex: 1; /* 最常用：等分剩余空间 */
flex: 0 0 200px; /* 固定宽度 */
flex: auto; /* 根据内容自适应 */
}
/* 不推荐：分开写（容易遗漏） */
.item {
flex-grow: 1;
/* 忘记写flex-shrink和flex-basis可能导致意外行为 */
}2. 避免过度嵌套Flex容器
代码示例
<!-- 不推荐 -->
<div style="display:flex">
<div style="display:flex">
<div style="display:flex">
<div>内容</div>
</div>
</div>
</div>
<!-- 推荐：只在需要时使用 -->
<div style="display:flex">
<div>内容</div>
</div>3. Flex项目最小宽度
代码示例
/* Flex项目默认不会缩小到内容以下 */
/* 如果需要允许缩小，设置min-width */
.flex-item {
min-width: 0; /* 允许缩小到0 */
overflow: hidden; /* 防止内容溢出 */
text-overflow: ellipsis;
white-space: nowrap;
}4. Flex与Grid的选择
代码示例
/* 一维排列（行或列）用Flexbox */
.nav { display: flex; } /* 导航栏 */
.card-list { display: flex; flex-wrap: wrap; } /* 卡片列表 */
.toolbar { display: flex; } /* 工具栏 */
/* 二维布局（行和列）用Grid */
.page { display: grid; grid-template-columns: 250px 1fr; } /* 页面框架 */
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); } /* 日历 */七、代码规范示例
代码示例
/* ========================================
Flexbox布局规范
======================================== */
/* 1. 使用flex简写而非单独属性 */
.item { flex: 1; } /* 好 */
.item { flex-grow: 1; } /* 差：不完整 */
/* 2. 容器属性写在父元素，项目属性写在子元素 */
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.container > .item {
flex: 1;
min-width: 0; /* 防止内容溢出 */
}
/* 3. 常用布局模式 */
/* 水平垂直居中 */
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* 底部固定布局 */
.sticky-footer {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.sticky-footer .content {
flex: 1;
}
/* 等分布局 */
.equal-split {
display: flex;
gap: 16px;
}
.equal-split > * {
flex: 1;
min-width: 0;
}
/* 侧边栏+内容布局 */
.sidebar-layout {
display: flex;
gap: 20px;
}
.sidebar-layout .sidebar {
flex: 0 0 250px;
}
.sidebar-layout .main {
flex: 1;
min-width: 0;
}八、常见问题与解决方案
常见问题
问题1：Flex项目文本溢出
问题：长文本不截断
解决：设置min-width: 0，配合overflow: hidden和text-overflow: ellipsis
问题2：最后一行左对齐
问题：space-between最后一行只有一个元素时居右
解决：添加伪元素::after，设置flex: auto
问题3：Flex项目高度不一致
问题：项目高度不统一
解决：使用align-items: stretch（默认值），项目会拉伸填满容器高度
问题4：IE11中flex:1不生效
问题：IE11中flex: 1不生效
解决：显式设置flex: 1 1 0%或flex: 1 1 auto，并添加width: 0作为IE11修复
九、总结
Flexbox是现代CSS布局的核心技术，关键要点如下：
-
一维布局利器：Flexbox擅长处理一个方向上的元素排列
-
容器与项目：理解容器属性和项目属性的区别是掌握Flexbox的基础
-
主轴与交叉轴：所有对齐属性都基于主轴和交叉轴的概念
-
flex简写：优先使用
flex简写属性，避免遗漏 -
完美居中：
display:flex+justify-content:center+align-items:center是最简单的居中方案 -
gap属性：现代浏览器支持Flex容器的gap属性，替代margin实现间距
-
min-width:0：防止Flex项目内容溢出的关键技巧
-
与Grid配合：Flexbox处理一维排列，Grid处理二维布局，两者配合使用效果最佳
标签：
Flexbox
弹性布局
CSS布局
主轴交叉轴
flex属性
居中对齐
CSS3
本文涉及AI创作
内容由AI创作，请仔细甄别
