Flex布局与MediaQuery打造响应式网页

本文深入讲解了如何通过CSS Flexbox与Media Query的协同配合，高效构建真正灵活、自然的响应式网页布局——利用Flex的弹性伸缩、自动对齐和换行能力，让内容在不同设备上智能调整排列方式（如桌面三列、平板两列、手机单列），再结合精准的媒体查询断点（767px以下、768–1023px、1024px以上）动态切换flex-direction、flex比例及间距等样式，以导航栏等典型场景为例，展示了无需外部框架即可实现专业级响应式效果的完整实践路径。

使用 CSS Flexbox 与 Media Query 结合，可以高效实现响应式布局。Flex 弹性布局让容器内部元素能自动调整大小和位置，而 Media Query 能根据设备屏幕尺寸应用不同的样式规则，两者结合可适配手机、平板、桌面等多种设备。

flex 布局基础

Flex 容器通过 display: flex 启用弹性布局，子元素会沿主轴方向排列，支持动态伸缩。

• flex-direction：控制主轴方向（row / column）
• flex-wrap：允许换行（wrap）
• justify-content：主轴对齐方式
• align-items：交叉轴对齐方式
• flex：子项的伸缩比例（如 flex: 1）

示例：创建一个自适应容器

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.item {
  flex: 1 1 200px; /* 最小宽度 200px，可伸缩 */
}

media query 断点设置

Media Query 根据视口宽度切换布局。常见断点：

• 手机：max-width: 767px
• 平板：768px ~ 1023px
• 桌面：min-width: 1024px

配合 flex 调整布局结构：

/* 桌面端：三列布局 */
@media (min-width: 1024px) {
  .container {
    flex-direction: row;
  }
  .item {
    flex: 1;
  }
}
<p>/<em> 平板：两列 </em>/
@media (max-width: 1023px) and (min-width: 768px) {
.container {
flex-direction: row;
}
.item {
flex: 0 0 calc(50% - 8px);
}
}</p><p>/<em> 手机：单列垂直排列 </em>/
@media (max-width: 767px) {
.container {
flex-direction: column;
}
.item {
flex: 1 1 100%;
}
}</p>

响应式导航栏实例

利用 flex + media query 实现折叠式导航：

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
<p>.nav-links {
display: flex;
list-style: none;
gap: 20px;
}</p><p>/<em> 小屏下堆叠显示 </em>/
@media (max-width: 767px) {
.nav {
flex-direction: column;
text-align: center;
}
.nav-links {
margin-top: 10px;
flex-direction: column;
}
}</p>

基本上就这些。灵活运用 flex 的弹性特性与 media query 的条件判断，能构建出自然流畅的响应式界面，无需依赖框架也能满足大多数布局需求。

本篇关于《Flex布局与MediaQuery打造响应式网页》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！