使用Flexbox 或 CSS Grid 等现代布局怎么用，请举例子

Flexbox（弹性盒子模型）和CSS Grid是两种强大的现代布局工具，它们允许设计师轻松地创建响应式的网格布局，适应各种屏幕尺寸。下面我会分别简述这两种布局，并给出一个简单的例子。

### Flexbox

**基本语法**：
使用`display: flex`或`display: inline-flex`将元素设置为flex容器，然后用`justify-content`, `align-items`, 和 `flex-direction` 控制元素之间的排列。

**例子**：
假设我们有一个三列布局的菜单栏，当屏幕宽度减小时，中间列会变成一行显示。

HTML:

<div class="container">
  <div class="item item-left">左侧</div>
  <div class="item item-center">中心</div>
  <div class="item item-right">右侧</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: space-between; /* 列间间隔均匀分布 */
  flex-wrap: wrap; /* 换行 */
}

.item {
  flex: 1; /* 自动分配空间 */
  min-width: 200px;
}

.item-left, .item-right {
  flex-basis: 25%;
  background-color: #f9f9f9;
}

.item-center {
  flex-basis: calc(50% - 20px); /* 计算剩余空间的一半 */
}

### CSS Grid

**基本语法**：
使用`display: grid`将元素设置为grid容器，然后用`grid-template-columns`和`grid-template-rows`定义网格的列宽和行高。

**例子**：
同样是一个三列布局，但这次是栅格化的，适合大屏幕展示。

HTML:

<div class="grid-container">
  <div class="grid-item">左侧</div>
  <div class="grid-item">中心</div>
  <div class="grid-item">右侧</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 保证最小宽度，填充可用空间 */
  gap: 10px; /* 行间间距 */
}

.grid-item {
  background-color: #f9f9f9;
}