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

**Flex布局与媒体查询实用教程：打造完美响应式网页** 想要让你的网页在各种设备上都能完美呈现？本文将带你掌握Flexbox和Media Query的强大组合，轻松实现响应式布局！首先，我们将利用Flexbox构建灵活的页面结构，例如桌面端导航的横向排列。然后，通过Media Query在不同屏幕尺寸下调整样式，例如在移动端将导航改为垂直排列并全宽显示。我们还将学习如何根据屏幕大小控制换行、对齐方式，甚至隐藏或重排元素，例如小屏幕上隐藏侧边栏。通过控制`flex-direction`、`flex-wrap`、`order`等属性，让你的网页在任何设备上都能呈现最佳效果。掌握Flex布局和媒体查询，轻松构建适应各种设备的精美网页！

先用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学习网公众号！