CSS3学习教程，从入门到精通，CSS3 弹性盒子(Flexbox)布局全面指南（20）
CSS3 弹性盒子(Flexbox)布局全面指南
一、Flexbox 概述
Flexbox（弹性盒子）是 CSS3 提供的一种一维布局模型，可以轻松实现各种复杂的页面布局。它特别适合处理不同屏幕尺寸下的元素排列和对齐问题。
主要优势：
- 简单实现垂直居中
- 轻松创建等高的列
- 自动分配剩余空间
- 改变元素显示顺序而不影响HTML结构
- 响应式设计更加简单
二、Flexbox 基本概念
1. Flex 容器 (Flex Container)
设置了 display: flex 或 display: inline-flex 的元素成为 flex 容器。
2. Flex 项目 (Flex Items)
flex 容器内的直接子元素自动成为 flex 项目。
3. 主轴 (Main Axis) 和 交叉轴 (Cross Axis)
- 主轴：flex 项目的排列方向
- 交叉轴：与主轴垂直的方向
三、Flex 容器属性
1. display
定义 flex 容器。
.container {display: flex; /* 块级 flex 容器 */display: inline-flex; /* 行内 flex 容器 */
}
2. flex-direction
定义主轴方向。
.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. flex-flow
flex-direction 和 flex-wrap 的简写。
.container {flex-flow: row wrap; /* 方向为row，允许换行 */
}
5. justify-content
定义主轴上的对齐方式。
.container {justify-content: flex-start; /* 默认值，向主轴起点对齐 */justify-content: flex-end; /* 向主轴终点对齐 */justify-content: center; /* 居中对齐 */justify-content: space-between; /* 两端对齐，项目间间隔相等 */justify-content: space-around; /* 每个项目两侧间隔相等 */justify-content: space-evenly; /* 项目间和两端间隔完全相等 */
}
6. align-items
定义交叉轴上的对齐方式。
.container {align-items: stretch; /* 默认值，拉伸填满容器高度 */align-items: flex-start; /* 向交叉轴起点对齐 */align-items: flex-end; /* 向交叉轴终点对齐 */align-items: center; /* 居中对齐 */align-items: baseline; /* 基线对齐 */
}
7. align-content
定义多根轴线的对齐方式（只有一根轴线时无效）。
.container {align-content: stretch; /* 默认值，轴线占满整个交叉轴 */align-content: flex-start; /* 向交叉轴起点对齐 */align-content: flex-end; /* 向交叉轴终点对齐 */align-content: center; /* 居中对齐 */align-content: space-between; /* 两端对齐，轴线间间隔相等 */align-content: space-around; /* 每根轴线两侧间隔相等 */
}
四、Flex 项目属性
1. order
定义项目的排列顺序，数值越小越靠前。
.item {order: 0; /* 默认值 */
}
2. flex-grow
定义项目的放大比例，默认为0（不放大）。
.item {flex-grow: 1; /* 如果有剩余空间，项目将放大 */
}
3. flex-shrink
定义项目的缩小比例，默认为1（空间不足时缩小）。
.item {flex-shrink: 0; /* 空间不足时也不缩小 */
}
4. flex-basis
定义在分配多余空间之前，项目占据的主轴空间。
.item {flex-basis: auto; /* 默认值，项目本来的大小 */flex-basis: 200px; /* 固定宽度 */
}
5. flex
flex-grow, flex-shrink 和 flex-basis 的简写。
.item {flex: 1; /* 相当于 flex: 1 1 0% */flex: 1 1 auto; /* 相当于 flex-grow: 1, flex-shrink: 1, flex-basis: auto */
}
6. align-self
允许单个项目有与其他项目不一样的对齐方式。
.item {align-self: auto; /* 默认值，继承父容器的align-items */align-self: flex-start;align-self: flex-end;align-self: center;align-self: baseline;align-self: stretch;
}
五、Flexbox 实战案例
案例1：基础 Flex 布局
<!DOCTYPE html>
<html lang="en">
<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;}/* Flex 容器 */.container {display: flex; /* 启用 Flexbox */flex-direction: row; /* 主轴方向为水平 */flex-wrap: wrap; /* 允许换行 */justify-content: space-between; /* 主轴对齐方式 */align-items: center; /* 交叉轴对齐方式 */height: 300px;background-color: #f5f5f5;padding: 10px;border: 1px solid #ddd;}/* Flex 项目 */.item {width: 100px;height: 100px;background-color: #4CAF50;color: white;display: flex;justify-content: center;align-items: center;font-size: 24px;margin: 5px;}/* 特殊项目 */.item.special {align-self: flex-end; /* 单独设置对齐方式 */background-color: #2196F3;}</style>
</head>
<body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item special">3</div><div class="item">4</div><div class="item">5</div></div>
</body>
</html>
案例2：响应式导航栏
<!DOCTYPE html>
<html lang="en">
<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: Arial, sans-serif;}/* 导航容器 */.navbar {display: flex;justify-content: space-between;align-items: center;background-color: #333;padding: 1rem;flex-wrap: wrap;}/* 品牌logo */.brand {color: white;font-size: 1.5rem;text-decoration: none;padding: 0.5rem;}/* 导航链接容器 */.nav-links {display: flex;list-style: none;}/* 导航链接 */.nav-links a {color: white;text-decoration: none;padding: 0.5rem 1rem;display: block;}.nav-links a:hover {background-color: #555;border-radius: 4px;}/* 汉堡菜单按钮 */.toggle-button {display: none;flex-direction: column;justify-content: space-between;width: 30px;height: 21px;cursor: pointer;}.toggle-button .bar {height: 3px;width: 100%;background-color: white;border-radius: 10px;}/* 响应式设计 - 移动端 */@media (max-width: 768px) {.toggle-button {display: flex;}.nav-links {display: none;width: 100%;flex-direction: column;}.navbar {flex-direction: column;align-items: flex-start;}.nav-links.active {display: flex;}.nav-links li {text-align: center;padding: 0.5rem;}}</style>
</head>
<body><nav class="navbar"><a href="#" class="brand">FlexNav</a><div class="toggle-button"><span class="bar"></span><span class="bar"></span><span class="bar"></span></div><ul class="nav-links"><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">关于</a></li><li><a href="#">联系</a></li></ul></nav><script>// 汉堡菜单点击事件const toggleButton = document.querySelector('.toggle-button');const navLinks = document.querySelector('.nav-links');toggleButton.addEventListener('click', () => {navLinks.classList.toggle('active');});</script>
</body>
</html>
案例3：圣杯布局（Holy Grail Layout）
<!DOCTYPE html>
<html lang="en">
<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: Arial, sans-serif;min-height: 100vh;display: flex;flex-direction: column;}/* 头部样式 */header {background-color: #4CAF50;color: white;padding: 1rem;text-align: center;}/* 主要内容容器 */.main-container {display: flex;flex: 1;}/* 侧边栏 */aside {flex: 0 0 200px;background-color: #333;color: white;padding: 1rem;}/* 左侧边栏 */.left-sidebar {order: -1; /* 移动到最左边 */}/* 主内容区 */main {flex: 1;padding: 1rem;background-color: #f9f9f9;}/* 右侧边栏 */.right-sidebar {/* 默认顺序 */}/* 页脚 */footer {background-color: #333;color: white;padding: 1rem;text-align: center;}/* 响应式设计 */@media (max-width: 768px) {.main-container {flex-direction: column;}aside {flex: 0 0 auto;order: 0; /* 重置顺序 */}}</style>
</head>
<body><header><h1>圣杯布局</h1><p>使用 Flexbox 实现</p></header><div class="main-container"><main><h2>主内容区</h2><p>这里是页面的主要内容区域。</p><p>Flexbox 可以轻松实现这种经典的三栏布局，并且很容易实现响应式设计。</p></main><aside class="left-sidebar"><h3>左侧边栏</h3><ul><li>导航项1</li><li>导航项2</li><li>导航项3</li></ul></aside><aside class="right-sidebar"><h3>右侧边栏</h3><p>这里可以放置广告或其他内容。</p></aside></div><footer><p>© 2023 Flexbox 圣杯布局示例</p></footer>
</body>
</html>
案例4：等高卡片布局
<!DOCTYPE html>
<html lang="en">
<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: Arial, sans-serif;padding: 2rem;background-color: #f5f5f5;}/* 卡片容器 */.card-container {display: flex;gap: 1rem; /* 卡片间距 */flex-wrap: wrap;justify-content: center;}/* 卡片样式 */.card {flex: 1; /* 自动分配空间 */min-width: 250px; /* 最小宽度 */max-width: 350px; /* 最大宽度 */background-color: white;border-radius: 8px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);display: flex;flex-direction: column; /* 垂直排列内容 */}/* 卡片图片 */.card-img {height: 150px;background-color: #ddd;border-radius: 8px 8px 0 0;overflow: hidden;}.card-img img {width: 100%;height: 100%;object-fit: cover;}/* 卡片内容 */.card-content {padding: 1rem;flex: 1; /* 使内容区域自动填充剩余空间 */display: flex;flex-direction: column;}.card-title {font-size: 1.25rem;margin-bottom: 0.5rem;}.card-text {color: #666;margin-bottom: 1rem;flex: 1; /* 文本区域自动填充 */}.card-button {display: inline-block;padding: 0.5rem 1rem;background-color: #4CAF50;color: white;text-decoration: none;border-radius: 4px;text-align: center;align-self: flex-start; /* 按钮左对齐 */}.card-button:hover {background-color: #45a049;}</style>
</head>
<body><div class="card-container"><div class="card"><div class="card-img"><img src="https://via.placeholder.com/350x150" alt="Placeholder"></div><div class="card-content"><h3 class="card-title">卡片标题1</h3><p class="card-text">这里是卡片的内容描述。Flexbox 可以轻松实现等高卡片布局，无论每张卡片的内容多少，它们的高度都会保持一致。</p><a href="#" class="card-button">了解更多</a></div></div><div class="card"><div class="card-img"><img src="https://via.placeholder.com/350x150" alt="Placeholder"></div><div class="card-content"><h3 class="card-title">卡片标题2</h3><p class="card-text">这里是卡片的内容描述。这个卡片的内容稍微少一些。</p><a href="#" class="card-button">了解更多</a></div></div><div class="card"><div class="card-img"><img src="https://via.placeholder.com/350x150" alt="Placeholder"></div><div class="card-content"><h3 class="card-title">卡片标题3</h3><p class="card-text">这里是卡片的内容描述。这个卡片的内容更多一些，用来展示 Flexbox 如何保持卡片高度一致。无论内容多少，所有卡片都会保持相同的高度，使布局更加整洁美观。</p><a href="#" class="card-button">了解更多</a></div></div></div>
</body>
</html>
六、Flexbox 常见问题与解决方案
1. 浏览器兼容性
Flexbox 在现代浏览器中有很好的支持，但在旧版浏览器（如 IE10 及以下）中可能需要前缀：
.container {display: -webkit-box; /* 旧版 Safari, iOS, Android */display: -moz-box; /* 旧版 Firefox */display: -ms-flexbox; /* IE10 */display: -webkit-flex; /* Chrome <21, Safari 6.1+, iOS Safari 7+ */display: flex; /* 标准语法 */
}
2. 内容溢出问题
当 flex 项目包含不可换行的文本时，可能导致溢出：
.item {min-width: 0; /* 修复文本溢出问题 */overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
3. 等分空间问题
使用 flex: 1 可以让项目等分空间，但要注意设置 min-width 或 flex-basis：
.item {flex: 1;min-width: 0; /* 确保内容不会撑大项目 */
}
4. 垂直居中
Flexbox 最常用的功能之一就是轻松实现垂直居中：
.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 300px; /* 必须有明确高度 */
}
七、Flexbox 最佳实践
-
合理使用简写属性：
- 优先使用
flex简写而不是单独设置flex-grow,flex-shrink,flex-basis
- 优先使用
-
注意性能：
- Flexbox 布局性能通常很好，但在大型复杂布局中要注意嵌套层次
-
结合媒体查询：
- 使用媒体查询调整 flex 方向或项目大小，实现响应式设计
-
命名与组织：
- 为 flex 容器和项目使用有意义的类名
- 将 flex 相关样式组织在一起，便于维护
-
渐进增强：
- 为不支持 Flexbox 的浏览器提供后备布局方案
通过掌握这些 Flexbox 的知识点和实践案例，你可以轻松创建各种复杂的页面布局，并实现优秀的响应式设计效果。
- 为不支持 Flexbox 的浏览器提供后备布局方案
相关文章：
布局全面指南（20）)
CSS3学习教程，从入门到精通，CSS3 弹性盒子(Flexbox)布局全面指南（20）
CSS3 弹性盒子(Flexbox)布局全面指南 一、Flexbox 概述 Flexbox（弹性盒子）是 CSS3 提供的一种一维布局模型，可以轻松实现各种复杂的页面布局。它特别适合处理不同屏幕尺寸下的元素排列和对齐问题。 主要优势： 简单实现垂直居中…...
Redis 性能数据解读与问题排查优化版
目录标题 Redis 性能数据解读与问题排查优化版一、Redis 性能数据解读二、常见问题排查与解决（一）CPU 使用率高（二）内存使用异常（三）集群状态异常（四）数据库状态问题 三、综合优化建…...
新能源动力电池测试设备深度解析：充放电设备与电池模拟器的差异及技术趋势
一、技术原理对比与核心技术创新 充放电设备 核心原理与硬件架构 充放电设备的核心功能是通过电力电子技术精确控制电池的充放电过程，其硬件架构包括高精度电源模块、双向DC/DC变换器、数据采集系统和温控单元。例如，在放电阶段，设备通过双向…...
LVS的三种工作模式简述
一、引言 在过去的十几年中，Internet从几个研究机构相连为信息共享的网络发展成为拥有大量应用和服务的全球性网络，它正成为人们生活中不可缺少的 一部分。虽然Internet发展速度很快，但建设和维护大型网络服务依然是一项挑战性的任务…...
Ribbon负载均衡的深度解析与应用
在微服务架构中，服务之间的调用频繁且复杂，因此负载均衡显得尤为重要。Spring Cloud生态系统中，Ribbon作为一个客户端负载均衡器，扮演着关键的角色。它不仅能提高系统的响应速度，还能确保系统的稳定性和可用性。接下来…...
使用 Layers 扩展你的 Nuxt4 应用
面对一个臃肿的页面或项目，你会如何简化重构、扩展它？ 当单个 Vue 文件中界面/业务足够多时，通常我们会把它拆分成多个 components 或 composables 来引入，以此来减少此文件复杂度和增加可维护性。 当一个项目的界面/业务逻辑足…...
Excel处理控件Aspose.Cells指南：如何在不使用 Microsoft Excel 的情况下解锁 Excel 工作表
Microsoft Excel 允许用户使用密码保护工作表，以防止未经授权的更改。但是，在某些情况下，您可能需要在不使用 Microsoft Excel 的情况下解锁 Excel 工作表。在本指南中，我们将探讨解锁 Excel 工作表的不同方法，例如使用…...
进军场景智能体，云迹机器人又快了一步
（图片来源：Pixels） 2025年，AI和机器人行业都发生了巨大改变。 数科星球原创 作者丨苑晶 编辑丨大兔 2025年，酒店行业正掀起一股批量采购具备AI功能的软硬一体解决方案的热潮。 在DeepSeek、Manus等国产AI软件的推动…...
vue 使用v-model实现父子组件传值——子父组件同步更新
基于vue2和vue3两个版本的框架略显不同，所以我分开的来讲： 1、vue2 子组件（my-input.vue）： <template><input type"text" :value"name" input"inputChange" /> </tem…...
PHP 应用SQL 注入符号拼接请求方法HTTP 头JSON编码类
#PHP-MYSQL- 数据请求类型 SQL 语句由于在黑盒中是无法预知写法的， SQL 注入能发成功是需要拼接原 SQL 语句， 大部分黑盒能做的就是分析后各种尝试去判断，所以有可能有注入但可能出现无法注入成 功的情况。究其原因大部分都是原 SQL …...
【React】基础版React + Redux实现教程，自定义redux库，Redux Toolkit教程
本项目是一个在react中，使用 redux 管理状态的基础版实现教程，用简单的案例练习redux的使用，旨在帮助学习 redux 的状态管理机制，包括 store、action、reducer、dispatch 等核心概念。 项目地址：https://github.com/Yv…...
23种设计模式-适配器(Adapter)设计模式
适配器设计模式 🚩什么是适配器设计模式？🚩适配器设计模式的特点🚩适配器设计模式的结构🚩适配器设计模式的优缺点🚩适配器设计模式的Java实现🚩代码总结🚩总结 🚩什么是…...
debug 笔记：llama 3.2 部署bug 之cutlassF: no kernel found to launch!
1 问题描述 按照官方的写法 import torch from transformers import pipeline import os os.environ["HF_TOKEN"] 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 model_id "meta-llama/Llama-3.2-3B"pipe pipeline("text-generation", modelmode…...
TCP的长连接和短连接，以及它们分别适用于什么场合
TCP长连接与短连接详解 一、核心概念对比 特性长连接（Persistent Connection）短连接（Short-lived Connection）连接生命周期一次建立后长期保持，多次数据交互复用同一连接每次数据交互均需新建连接，完成后…...
【操作系统】（五）操作系统引导（Boot）
视频参考：王道计算机2.了解计算机的启动过程和主引导扇区，让你的计算机从这里起飞吧_哔哩哔哩_bilibili 操作系统引导(Boot)就是在开机的时候，如何让操作系统运行起来？ 主存分成RAM小部分ROM,其中ROM里面存放的是BIOS（…...
蓝桥与力扣刷题（蓝桥 山）
题目：这天小明正在学数数。 他突然发现有些止整数的形状像一挫 “山”, 比㓚 123565321、145541123565321、145541, 它 们左右对称 (回文) 且数位上的数字先单调不减, 后单调不增。 小朋数了衣久也没有数完, 他惒让你告诉他在区间 [2022,2022222022] 中有 多少个数…...
211数学专业大三想转码C++方向，目前在学算法，没系统学习计算机专业课，要先定方向吗？
今天给大家分享的是一位粉丝的提问，211数学专业大三想转码C方向，目前在学算法，没系统学习计算机专业课，要先定方向吗？ 接下来把粉丝的具体提问和我的回复分享给大家，希望也能给一些类似情况的小伙伴一些启…...
场馆预约小程序的设计与实现
摘 要 时代在进步，人们对日常生活质量的要求不再受限于衣食住行。现代人不仅想要一个健康的身体，还想拥有一身宛如黄金比例的身材。但是人们平常除了上下班和上下学的时间，其余空余时间寥寥无几，所以我们需要用体育场馆预约来节省…...
黑苹果及OpenCore Legacy Patcher
黑苹果及OpenCore Legacy Patcher OpenCoreUnable to resolve dependencies, error code 71 OpenCore Unable to resolve dependencies, error code 71 黑苹果升级后打补丁不成功，比如提示以下错误，可参考官方文档进行修复。 Open TerminalType sudo …...
记一个阿里云CDN域名配置不当引起服务鉴权失效问题
背景：公司最近需要通过不同的域名提供给不同角色的用户使用，在阿里云上新增了多个域名，新域名与原域名指向的是一样的服务器地址。 问题现象：用户使用新域名登录后，返回的不是该用户的身份信息，不管是哪个…...
Pytorch学习笔记（十二）Learning PyTorch - NLP from Scratch
这篇博客瞄准的是 pytorch 官方教程中 Learning PyTorch 章节的 NLP from Scratch 部分。 官网链接：https://pytorch.org/tutorials/intermediate/nlp_from_scratch_index.html 完整网盘链接: https://pan.baidu.com/s/1L9PVZ-KRDGVER-AJnXOvlQ?pwdaa2m 提取码: …...
遗传算法优化支持向量机分类是一种将遗传算法与支持向量机相结合的方法
遗传算法优化支持向量机分类是一种将遗传算法与支持向量机相结合的方法，旨在提高支持向量机的分类性能。以下是其相关内容的详细介绍： 支持向量机（SVM） 原理：SVM是一种基于统计学习理论的机器学习方法，其…...
Axure项目实战：智慧运输平台后台管理端-母版、登录（文本框高级交互）
亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！ 课程主题：智慧运输平台后台管理端 主要内容：母版、登录页制作 应用场景：母版、登录、注册、密码找回 案例展示： 案例视频…...
时序数据库 InfluxDB（一）
时序数据库 InfluxDB（一） 数据库种类有很多，比如传统的关系型数据库 RDBMS（ 如 MySQL ），NoSQL 数据库（ 如 MongoDB ），Key-Value 类型（ 如 redis ）…...
java开发环境本地全套
文章目录 1、jdk下载安装1.1、下载地址：1.2、安装1.3、验证 2、maven下载安装2.1、下载地址2.2、安装2.3、验证 3、git下载。3.1、下载地址 4、ideal下载5、dbeaver下载 1、jdk下载安装 1.1、下载地址： https://www.oracle.com/java/technologies/down…...
)
优化 K8s负载平衡之方法(Method for Optimizing K8s Load Balancing)
优化 K8s 负载平衡的 11 种方法 优化 Kubernetes 中的负载平衡对于保持应用程序的高可用性、可扩展性和性能至关重要。有效的负载平衡可确保流量在 Pod 之间高效分配，防止任何单个 Pod 成为瓶颈并确保无缝的用户体验。本指南探讨了优化 Kubernetes 负载平衡的 11 种…...
华为配置篇-ISIS基础实验
ISIS 一、简述二、常用命令总结三、实验 一、简述 一、基本定义与历史背景 IS-IS（Intermediate System to Intermediate System，中间系统到中间系统）是一种链路状态路由协议，最初由ISO设计用于OSI（开放系统互联&#…...
QTcpSocket（客户端实现）多线程连接慢问题
20250325记录 环境 Qt5.14.2 64位 msvc编译 在多线程环境下，使用QTcpSocket实现客户端，发现在少部分电脑上，连接时间过长，定时器检查套接字状态时，发现连接处于QAbstractSocket::ConnectingState状态。 //声明为一…...
【深度学习】【目标检测】【OnnxRuntime】【C++】YOLOV3模型部署
【深度学习】【目标检测】【OnnxRuntime】【C】YOLOV3模型部署 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【深度学习】【目标检测】【OnnxRuntime】【C】YOLOV3模型部署前言Windows平台搭建依赖环境模型转换--pytorch转onnxONNXRuntime推…...
【力扣hot100题】（008）找到字符串中所有字母异位词
我果然还是太菜了（点烟）。 一开始想法是构建map，记录每个字母出现的位置，后来想了好久滑动窗口该怎么移动。 后来看了答案才明白滑动窗口是固定的啊啊啊，每次向右滑就两指针同时右移就行。 好简单……为什么我做了这…...