在前端开发过程中，经常需要对页面进行布局。而传统的 CSS 布局方式已经很难满足现代网页的各种需求，因此前端开发人员需要学习更加高效灵活的布局方式。本文将介绍 CSS Flexbox 布局，详解其中的 6 种常见应用，帮助读者掌握 Flexbox 布局的核心知识，并能够在实际项目中灵活应用。
什么是 CSS Flexbox 布局
Flexbox 布局是一种基于 CSS3 的新型布局方式。它采用弹性盒子模型对容器内的子元素进行布局。相对于传统的 CSS 排版方式，Flexbox 布局具有更高的灵活性，更加方便快捷的实现响应式布局，并且可以方便地对齐、排列和分布子元素。
Flexbox 布局应用
下面将详细介绍 6 种常见的 Flexbox 布局应用。
1. 水平居中
通过使用 Flexbox 布局，可以非常简单地实现水平居中。
.container { display: flex; justify-content: center; }
display: flex：设置容器为 Flexbox 布局；justify-content: center：设置容器内子元素的水平布局方式为居中。
2. 垂直居中
使用 Flexbox 布局可以非常方便地实现垂直居中。
.container { display: flex; align-items: center; }
display: flex：设置容器为 Flexbox 布局；align-items: center：设置容器内子元素的垂直布局方式为居中。
3. 列表布局
使用 Flexbox 布局可以方便地实现列表布局。需要注意的是，需要设置子元素为 flex: 1，使其占满剩余的空间。
.container { display: flex; flex-wrap: wrap; } .item { flex: 1; width: 100%; }
display: flex：设置容器为 Flexbox 布局；flex-wrap: wrap：设置子元素在一行放不下时换行；flex: 1：让子元素占据剩余的空间。
4. 网格布局
使用 Flexbox 布局还可以方便地实现网格布局。需要注意的是，在 Flexbox 布局中，子元素的大小可以不相等。
.container { display: flex; flex-wrap: wrap; } .item { width: 25%; height: 100px; }
display: flex：设置容器为 Flexbox 布局；flex-wrap: wrap：设置子元素在一行放不下时换行；width: 25%：每个子元素占据 25% 的宽度。
5. 横向卡片布局
使用 Flexbox 布局可以方便地实现横向卡片布局。需要注意的是，需要设置子元素为 flex: 1，使其占满剩余的空间。
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ----- - ----- -- ------------- ----- - ---------------- - ------------- -- -展开代码
display: flex：设置容器为 Flexbox 布局；justify-content: space-between：使子元素等间距排列；flex: 1：让子元素占据剩余的空间；margin-right: 10px：设置子元素右侧的间距；item:last-child：使最后一个子元素右侧无间距。
6. 竖向卡片布局
使用 Flexbox 布局可以方便地实现竖向卡片布局。
.container { display: flex; flex-direction: column; } .item + .item { margin-top: 10px; }
display: flex：设置容器为 Flexbox 布局；flex-direction: column：设置子元素为纵向排列；item + .item：使除第一个子元素外，其他子元素上方有 10px 的间距。
总结
本文介绍了 CSS Flexbox 布局的基本概念和 6 种常见的应用。作为一种高效、灵活、响应式的布局方式，我们应该在日常开发中积极使用 Flexbox 布局，从而提高布局效率和开发质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651aca9595b1f8cacd29a535
