Flex布局与媒体查询实战教程

掌握响应式网页设计的核心！本文为你带来Flex布局与媒体查询的实用教程，助你轻松打造在各种屏幕尺寸下都能完美呈现的网站。文章详细讲解了如何巧妙结合Flexbox的弹性布局能力和Media Query的屏幕适配特性，通过CSS代码示例，演示了如何针对不同设备进行“微调”，例如：桌面端横向导航在移动端垂直排列，中等屏幕内容换行居中，小屏幕隐藏侧边栏等。学会运用`flex-direction`、`flex-wrap`、`order`等属性，配合断点控制，即可实现高效的响应式设计，让你的网页在任何设备上都拥有最佳用户体验。立即学习，提升你的前端开发技能！

先用Flexbox构建弹性布局，再通过Media Query在不同屏幕尺寸下调整样式。例如，桌面端导航横向排列，移动端改为垂直排列并全宽显示；中等屏幕允许换行并居中对齐，每项约占30%宽度；小屏幕上可隐藏侧边栏，调整内容显示顺序。通过断点控制flex-direction、flex-wrap、order等属性，实现响应式设计。

在 CSS 中，Flexbox 和 Media Query 结合使用可以创建响应式布局，让页面在不同屏幕尺寸下都能良好展示。基本思路是：先用 Flexbox 构建灵活的布局结构，再通过 Media Query 在特定断点调整 flex 属性、方向、换行、对齐方式等。

1. 使用 Flex 布局构建基础结构

先用 Flex 让容器内的子元素灵活排列。例如，一个导航栏在桌面端横向排列：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.nav-item {
  padding: 10px;
}

2. 用 Media Query 调整移动端布局

当屏幕变小时，可以改变主轴方向、允许换行、调整对齐方式等。比如在手机上让导航垂直排列：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav-item {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
}

3. 根据断点控制换行与对齐

在中等屏幕上，可以让项目换行显示，并居中对齐：

@media (max-width: 1024px) {
  .container {
    flex-wrap: wrap;
    justify-content: center;
  }
  .item {
    flex: 0 1 30%; /* 每项占大约 30% 宽度 */
    margin: 5px;
  }
}

4. 隐藏或重排元素

某些设备上可以隐藏不重要内容，或通过 order 属性调整显示顺序：

@media (max-width: 480px) {
  .sidebar {
    display: none;
  }
  .main-content {
    order: 1;
    width: 100%;
  }
  .header-title {
    order: -1;
    margin-bottom: 10px;
  }
}

基本上就这些。关键是先用 Flex 实现弹性布局，再用 Media Query 针对不同设备“微调”行为。这种组合简单高效，适合大多数响应式设计场景。

今天关于《Flex布局与媒体查询实战教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！