什么是 Flexbox
CSS Flexbox (CSS Flexible Box Layout) 是一个能够实现弹性盒子布局的 CSS 模块。它的主要目标是提供一种更加高效、自适应的方式来对容器中的子元素进行布局，从而实现响应式的设计。
Flexbox 布局的基本原理
Flexbox 布局是由容器和项目两个主要元素组成的。容器是子元素的父级元素，而所有的子元素都被称为项目。
Flexbox 布局的核心原理是通过以下四个方向来定义项目组合的布局：
- 主轴：定义 Flexbox 布局的方向，可以是水平（row）或垂直（column）方向。
- 主轴起点和终点：根据主轴方向来确定项目的排列顺序。
- 交叉轴：指与主轴垂直的轴，用来控制项目在容器中的位置。
- 交叉轴起点和终点：定义了项目在交叉轴上的排列顺序。
如何实现响应式布局
Flexbox 布局的弹性使其非常适合响应式布局。它可以轻松地实现移动端和桌面端的适配，并且不需要使用复杂的媒体查询和多重样式。
下面是一个简单的示例代码，演示如何使用 Flexbox 实现响应式布局：
-- -------------------- ---- -------
---- ------------------
---- ----------------------
---- ----------------------
---- ----------------------
------
-------
---------- -
-------- -----
---------- -----
-
----- -
----- - - ----
-
------ ----------- ------ -
----- -
----- - - ----
-
-
------ ----------- ------ -
----- -
----- - - -----
-
-
--------在这个例子中，我们定义了一个 Flexbox 容器，并使用了 flex-wrap 属性来让项目自动换行。每个项目都采用了 flex 属性，其中 1 1 33% 表示每个项目都可以根据需要增长和缩小，且占据容器的 33% 宽度。
在移动端设备上，我们可以使用媒体查询来修改项目的占用宽度。例如，我们可以将 .item 的 flex 属性改为 1 1 50%，这样项目就会占用容器的 50% 宽度。同样的，当屏幕尺寸小于 480px 时，我们将 .item 的 flex 属性改为 1 1 100%，这样每个项目就会占据整个容器的宽度。
总结
CSS Flexbox 布局是实现响应式布局的强大工具，它简单易用，能够轻松地适配不同屏幕尺寸和设备类型。学习 Flexbox 布局可以帮助开发者更加高效地完成布局工作，提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d1971fb5eee0b5258d1b03