给我一个媒体查询及弹性布局的代码

媒体查询和弹性布局是响应式设计中的关键概念，它们允许网页在不同设备和屏幕尺寸上呈现出适应性的布局。以下是一个简单的CSS代码示例，结合了媒体查询（Media Queries）和弹性布局（Flexbox）：

/* 全局样式 */
.container {
  display: flex;
  flex-wrap: wrap; /* 使子元素换行 */
  justify-content: space-between; /* 子元素在主轴方向均匀分布 */
  padding: 10px;
}

.item {
  flex-basis: calc(33.33% - 20px); /* 在可用空间内平均分配，减去间距 */
  margin-bottom: 20px;
  background-color: #f1f1f1;
  padding: 20px;
  box-sizing: border-box;
}

/* 媒体查询，针对屏幕宽度小于600px的情况 */
@media (max-width: 600px) {
  .item {
    flex-basis: 100%; /* 当屏幕变窄时，占据所有可用空间 */
  }
}

在这个例子中：

- `.container` 设置了弹性容器的基本属性，子元素`.item`会根据屏幕大小进行调整。
- `.item` 定义了每个小区域的基本样式，包括基础大小、间距和背景颜色。
- 使用 `@media` 查询来检测屏幕宽度是否小于或等于600px，如果满足条件，`.item` 的 `flex-basis` 就从之前的三分之一（33.33%）变为100%，这意味着当屏幕变窄时，所有小区域会堆叠在一起，而不是并排显示。

相关问题：
1. 什么是媒体查询？它在响应式设计中的作用是什么？
2. 除了Flexbox，还有哪些CSS布局模型可以实现弹性布局？
3. 媒体查询中的`max-width`是如何工作的？