在前端开发中，响应式设计已经成为一个重要的技能。而为了适应不同的设备大小和屏幕方向，灵活使用 CSS Flexbox 和媒体查询技术可以让网站更好地适应不同的环境。
CSS Flexbox 简介
CSS Flexbox 是 CSS3 中的一个新布局模块，可以通过一些简单的属性来实现弹性盒子布局。Flexbox 布局有两个基本概念：容器和项目。容器指包含元素的父级元素，项目指容器中的下级元素。通过设置容器和项目的一些属性，可以实现不同的布局方式。
以下是一些常用的 Flexbox 属性：
display:flex：将容器设置为 Flexbox 布局模式。flex-direction：设置项目的排列方式为水平或垂直。默认值为row。justify-content：设置项目在容器中的排列方式，可选值有flex-start、flex-end、center、space-between和space-around。align-items：设置项目的垂直方向的对齐方式，可选值有flex-start、flex-end、center、baseline和stretch。
媒体查询简介
媒体查询是用于响应式设计的一种技术，可以根据不同的设备、屏幕尺寸等情况，针对不同的条件设置不同的 CSS 样式。媒体查询的语法如下：
@media screen and (max-width: 768px) {
/* 样式代码 */
}该语法表示当设备宽度不大于 768px 时，应用样式代码。
结合使用 Flexbox 和媒体查询
在实际开发过程中，结合使用 Flexbox 和媒体查询可以实现更加灵活的布局和响应式效果。以下是一个简单的例子。
HTML 代码：
<div class="flexbox-container"> <div class="flexbox-item">Item 1</div> <div class="flexbox-item">Item 2</div> <div class="flexbox-item">Item 3</div> </div>
CSS 代码：
-- -------------------- ---- -------
------------------ -
-------- -----
---------- -----
---------------- --------------
-
------------- -
------ ----
----------------- -----
-------------- -----
-
------ ------ --- ----------- ------ -
------------- -
------ ----
-
-
------ ------ --- ----------- ------ -
------------- -
------ -----
-
-以上代码中，我们使用 Flexbox 实现了一个水平分布的三栏布局，并通过媒体查询的方式，在不同的设备上设置不同的宽度。例如，在设备宽度不大于 768px 时，每个项目的宽度就会变为 48% ，在设备宽度不大于 480px 时，则变为 100% 。
这个例子虽然简单，但可以很好地说明了使用 Flexbox 和媒体查询结合的方式，可以实现复杂的布局效果，并且具有很好的可维护性。
总结
在实践过程中，灵活使用 CSS Flexbox 和媒体查询技术可以实现更加灵活的响应式布局效果，并且具有很好的可维护性。因此，在开发过程中，需要熟练掌握这两个技术，并且能够结合实际需求灵活使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3928e48841e9894ff0d99