如何使用CSS实现Flex布局的响应式适配？media query与Flex结合技巧详解

在网页开发中，Flex布局因其灵活的排列能力被广泛使用。但当页面需要适配手机、平板和桌面等不同屏幕时，仅靠Flex本身还不够，必须结合CSS的media query来设置断点，才能在不同宽度下改变排列方向、换行行为和伸缩比例，实现真正的响应式适配。

Flex布局基础回顾

Flex布局通过给容器设置display: flex来启用。容器下的子元素成为Flex项目，可以用justify-content、align-items等控制对齐。以下是最简单的Flex容器代码：

/* 定义弹性容器 */
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

media query如何与Flex结合

media query可以监听视口宽度，当达到某个断点时覆盖原有的Flex属性。例如默认桌面端横向排列，移动端改为纵向排列并且允许换行。

常用断点设置

• 手机：max-width 767px
• 平板：768px 到 1024px
• 桌面：min-width 1025px

响应式Flex示例

下面代码展示了用media query调整flex-direction和flex-wrap的实现方式：

/* 桌面端默认样式 */
.card-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

/* 平板端：允许换行 */
@media (max-width: 1024px) {
  .card-list {
    flex-wrap: wrap;
  }
}

/* 手机端：改为纵向排列 */
@media (max-width: 767px) {
  .card-list {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

使用flex属性控制项目伸缩

在不同屏幕下，除了排列方向，还可以用flex简写控制项目放大缩小比例。如下方代码，在窄屏中让每个项目占满整行：

.item {
  flex: 1 1 200px;
}

@media (max-width: 767px) {
  .item {
    flex: 1 1 100%;
  }
}

完整HTML结构演示

以下为一个包含容器与项目的HTML结构，配合上面的CSS即可看到响应式效果：

<div class="card-list">
  <div class="item">卡片一</div>
  <div class="item">卡片二</div>
  <div class="item">卡片三</div>
</div>

注意事项

使用media query和Flex结合时，断点不要过多，避免样式冲突。建议先写移动端基础样式，再用min-width向上增强，这样更符合响应式设计思路。同时用浏览器开发者工具模拟不同设备检查排列是否符合预期。

CSSFlex布局media_query修改时间：2026-07-29 00:45:19