在现代网页设计中，创建灵活的界面并适配不同设备的需求至关重要。CSS Flexbox（弹性盒子） 是一个专为高效分配空间和对齐元素而设计的模块，即使元素尺寸是动态或未知的也能实现。
与传统的**块级（block）或行内（inline）**布局模型不同，Flexbox 可以灵活调整元素的大小、顺序和对齐方式，适应不同的屏幕和方向。
其主要优势在于不受单一方向的限制，这使其成为复杂设计和动态需求的理想选择。
虽然 Flexbox 是小规模设计（如组件内元素分布）的强大工具，但需要强调的是，对于大规模布局，CSS Grid 通常是更优的选择。
你想掌握 CSS Grid 并提升设计水平吗？
如果你仍在为 CSS 元素布局发愁，Grid 是创建灵活有序结构的关键工具。
CSS Grid：面向初学者和高级用户的完整指南
什么是 Flexbox？
Flexbox 是 CSS 的布局模块，允许高效分配容器内元素的空间，使其能根据需要扩展或收缩。
其核心机制是通过定义一个**"弹性容器"**来管理子元素的排列和尺寸。
Flexbox 模型简化了以下常见网页设计任务：
垂直和水平居中元素 无需使用 float 或 position 即可创建响应式设计 无需修改 HTML 代码即可调整元素顺序 通过 justify-content、align-items 和 gap 等属性实现空间的均衡或优先分配
该模块引入了关键概念，如主轴和交叉轴，它们定义了元素在容器中的排列方向，从而提供更高的灵活性。
基础概念与术语
Flexbox 不仅是一个属性，更是一个完整的模块，包含多种特性和属性。部分属性应用于主容器（弹性容器），另一些则作用于子元素（弹性元素）。
与基于传统布局的块级/行内流不同，Flexbox 引入了"弹性流方向（flex-flow directions）"系统，使容器内元素的排列更加灵活。
理解以下核心概念至关重要：
主轴与交叉轴
主轴（main axis）：弹性元素在容器中排列的方向，由 flex-direction属性决定，可以是水平或垂直方向。主轴起点/终点（main-start | main-end）：元素从 main-start开始排列，延伸至main-end。主轴尺寸（main size）：指元素的宽度或高度（取决于主轴方向），由 width或height属性决定。
交叉轴
交叉轴（cross axis）：与主轴垂直的轴，方向由主轴方向决定。 交叉轴起点/终点（cross-start | cross-end）：元素在容器中按行排列时，从 cross-start开始延伸至cross-end。交叉轴尺寸（cross size）：指元素在交叉轴方向的宽度或高度，同样由 width或height属性决定。
「图片来自 css-tricks.com」
掌握这些概念是精通 Flexbox 的关键，它们能帮助你更好地组织和控制可适应的布局。
弹性容器属性
图片来自 css-tricks.com
在 Flexbox 中，弹性容器是父元素，它定义了子元素的排列和对齐上下文。
以下是弹性容器的主要属性：
display
将容器定义为弹性容器，使其所有直接子元素变为弹性元素。可选值：
.container {
display: flex; /* 块级弹性容器 */
display: inline-flex; /* 行内弹性容器 */
}
需注意 CSS 列属性（column-count, column-width）对弹性容器无效。
flex-direction
设置主轴方向及弹性元素在容器中的排列方式。Flexbox 是单向布局模型，元素可排列为行或列。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row（默认）：从左到右排列（左到右语言）或从右到左（右到左语言） row-reverse：反转 row 方向 column：从上到下排列 column-reverse：反转 column 方向
示例： https://codepen.io/johnserranodev/pen/JojyJOg
flex-wrap
控制弹性元素是否换行排列。
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap（默认）：所有元素保持在一行 wrap：必要时换行排列 wrap-reverse：换行但反转行顺序
示例： https://codepen.io/johnserranodev/pen/XJWaaYd
flex-flow
flex-direction 和 flex-wrap 的简写属性。
.container {
flex-flow: row nowrap;
}
justify-content
控制元素在主轴上的对齐方式。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
flex-start（默认）：元素对齐主轴起点 flex-end：对齐主轴终点 center：居中对齐 space-between：元素间等距分布 space-around：元素前后留白 space-evenly：元素间均匀分布
示例： https://codepen.io/johnserranodev/pen/xbxLLaq?editors=1100
align-items
定义元素在交叉轴上的对齐方式。
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：对齐交叉轴起点 flex-end：对齐交叉轴终点 center：交叉轴居中 baseline：按文本基线对齐 stretch（默认）：元素填充交叉轴空间
示例： https://codepen.io/johnserranodev/pen/WbNEEYq?editors=1100
gap, row-gap, column-gap
设置弹性元素间的间距。
.container {
gap: 10px;
gap: 10px 20px; /* 行间距 列间距 */
row-gap: 10px;
column-gap: 15px;
}
类似于元素间的最小边距，不影响外边距。
示例： https://codepen.io/johnserranodev/pen/bNGrrZy?editors=1100
弹性元素属性
图片来自 css-tricks.com
order
默认情况下，弹性元素按 HTML 原始顺序排列。order 属性可控制其在弹性容器中的显示顺序。
.item {
order: 5; /* 默认值为 0 */
}
flex-grow
定义弹性元素在容器内扩展能力。使用无单位数值作为比例因子：
若所有元素设为 flex-grow: 1;，剩余空间均分若某元素设为 flex-grow: 2;，则尝试占据两倍空间
.item {
flex-grow: 4; /* 默认值：0 */
}
负值无效
order 与 flex-grow 示例： https://codepen.io/johnserranodev/pen/VYwzzNX?editors=1100
flex-shrink
定义弹性元素在空间不足时的收缩能力。同样使用无单位数值表示收缩比例：
所有元素设为 flex-shrink: 1;时，均匀收缩某元素数值较大时，会更快收缩
.item {
flex-shrink: 3; /* 默认值：1 */
}
负值无效
查看完整细节与示例 ?
想深入学习CSS Grid 实战案例？完整文章请阅读 ? CSS FlexBox：从零开始的高级设计
所有完整示例可在此查看： https://codepen.io/collection/kkkdGZ
总结
Flexbox 是现代网页设计中不可或缺的工具，它能高效地在弹性容器中分配和对齐元素。
其灵活性使其成为创建响应式界面的绝佳选择，无需依赖 float 或 position 等复杂技术。
关于 Flexbox 的关键点：
完全布局控制：支持特定方向（水平/垂直）排列，轻松定义元素尺寸和对齐方式 空间高效分配：通过 justify-content、align-items 和 gap 等属性，无需 hack 技巧即可实现平衡布局 动态元素排序：使用 order 属性可调整元素位置而不修改 HTML，提升组件排列灵活性 自适应与响应性：通过 flex-grow、flex-shrink 和 flex-basis 等属性，创建适应不同屏幕尺寸的流体界面 与其他工具结合：虽然 Flexbox 适合一维布局（行或列），但复杂设计可与 CSS Grid 配合使用，实现内容排列的完全控制
总之，Flexbox 是每位前端开发者必须掌握的技术，它能用更少代码实现更高效的灵活、可适应的现代设计。
· · ·
原文链接：https://dev.to/johnserranodev/css-flexbox-diseno-avanzado-desde-cero-5ckm
作者：John Serrano.
如果您觉得内容对您有帮助，欢迎在看、点赞、分享 ⬇️❤️⬇️
点击下方卡片，关注【前端小石匠】，一起学习，共同进步～
如果您关注前端相关领域，可以扫码添加小编微信进群交流学习～?近期热文
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
