什么是 CSS Flexbox
CSS Flexbox 是 CSS3 中的一个新的功能模块，用于实现一些布局方案。Flexbox 主要用于解决一些传统布局方案无法解决的问题，例如弹性布局、对齐和分布元素空间。
使用 Flexbox 的好处
与传统布局方案相比，Flexbox 提供了许多好处：
- 灵活性：可以轻松地在不同大小的屏幕上显示内容；
- 对齐性：元素可以水平或垂直对齐；
- 分布性：可以轻松地将元素分布到页面上；
- 可读性：清晰易读的布局代码。
使用 Flexbox 的基本概念
在使用 Flexbox 时，需要了解以下几个重要的概念：
容器和项目
在 Flexbox 中，容器是指包含项目的设置参考系。项目是指容器中的元素，它们可以是任何 HTML 元素。
主轴和交叉轴
在 Flexbox 中，主轴是指项目的布局方向，可以是水平方向（从左到右）或者垂直方向（从上到下）。交叉轴是指与主轴垂直的轴，可以是水平方向或者垂直方向。
伸缩性
在 Flexbox 中，每个项目都有伸缩性。这意味着它们可以根据容器的空间大小动态调整大小。
实际应用 Flexbox
下面是一些实际应用 Flexbox 的示例：
1. 实现水平对齐
在传统布局中，要实现元素的水平对齐需要设置其宽度和浮动，这样的布局效果随着屏幕大小的变化很容易变形。但是在 Flexbox 中，只需要将容器设置为 display: flex，然后使用 justify-content 属性实现水平对齐：
.container {
display: flex;
justify-content: center;
}使用该代码可以使 .container 中的元素水平居中。
2. 实现等高的列
在传统布局中，要实现等高的列需要使用 JavaScript 或者使用 display: table，但是这些方法都不是很理想。在 Flexbox 中，只需要将容器设置为 display: flex，然后使用 align-items 属性实现等高：
.container {
display: flex;
align-items: stretch;
}使用该代码可以使 .container 中的项目高度都相等。
3. 实现网格布局
在 Flexbox 中，可以使用 flex-wrap 属性和 order 属性实现网格布局。例如，下面的代码可以将一系列元素分为两列，在大屏幕上显示为四行，而在小屏幕上显示为一列：
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
-
----- -
------ ----
------ --
-
----------------- ------ -
----- -
------ -----
------ --
-
-这个例子可以在大屏幕上显示为：
1 2 3 4 5 6 7 8
在小屏幕上显示为：
1 2 3 4 5 6 7 8
总结
通过本文，我们了解了 CSS Flexbox 的基本概念、使用方法和应用场景，并且学习了一些实际代码示例。相信这些经验对于前端开发人员来说都是非常有用的。希望通过这篇文章能够帮助你更快地掌握并且熟练使用 Flexbox 布局，提高你的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6465c27a968c7c53b066b607