请举三个网页布局设计的例子，给出代码及详细解释

1. Flexbox布局

Flexbox布局是CSS3中新增的一种弹性布局模型。它可以方便的实现多种网页布局，包括响应式布局。以下是一个简单的Flexbox布局示例：

HTML代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

这个布局将container元素设为flex容器，通过justify-content和align-items属性来控制子元素的水平和垂直对齐方式。子元素（item）的宽度和高度都设为100px，background-color属性设置背景色。

2. 网格布局

CSS网格布局是CSS3中新增的一种二维布局模型。它通过将元素划分为网格，可以简单地创建复杂的网页布局。以下是一个简单的网格布局示例：

HTML代码：

<div class="container">
  <div class="item one">Item 1</div>
  <div class="item two">Item 2</div>
  <div class="item three">Item 3</div>
  <div class="item four">Item 4</div>
</div>

CSS代码：

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
}

.item {
  background-color: #ccc;
  padding: 20px;
  font-size: 18px;
}

.one {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.two {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.three {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.four {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

这个布局将container元素设为网格容器，通过grid-template-columns和grid-template-rows属性来定义网格的列数和行数，grid-gap属性设置网格之间的间距。子元素（item）的宽度和高度由网格的大小决定。每个子元素用grid-column和grid-row属性指定所占用的网格。

3. 响应式布局

响应式布局是一种能够适应不同屏幕大小和分辨率的网页布局。下面是一个简单的响应式布局示例：

HTML代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 33.33%;
  background-color: #ccc;
  padding: 20px;
  font-size: 18px;
}

@media only screen and (max-width: 600px) {
  .item {
    flex-basis: 50%;
  }
}

@media only screen and (max-width: 400px) {
  .item {
    flex-basis: 100%;
  }
}

这个布局使用Flexbox实现，并根据屏幕宽度自动调整子元素的排列方式。容器元素设为flex，子元素（item）的flex-basis属性表示占据父容器的比例。在媒体查询中，通过调整flex-basis属性的值来实现不同的响应式效果。