给我写一个占满网页宽度好看的列表三列左左右的html和css

下面是一个示例的HTML和CSS代码，实现了一个占满网页宽度的三列列表，左右两列宽度固定，中间列宽度自适应。

HTML代码：

<div class="container">
  <div class="column left">Left column</div>
  <div class="column middle">Middle column</div>
  <div class="column right">Right column</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

.column {
  box-sizing: border-box;
  padding: 20px;
  height: 200px;
  color: #fff;
}

.left {
  flex: 0 0 200px;
  background-color: #f44336;
}

.middle {
  flex: 1 0 auto;
  background-color: #4caf50;
}

.right {
  flex: 0 0 200px;
  background-color: #2196f3;
}

解释一下CSS代码：

- `.container` 是一个 flex 容器，设置了一些基本的 flex 布局属性。
- `.column` 是每个列的样式，设置了一些基本的样式属性，如 `box-sizing`, `padding`, `height` 和 `color`。
- `.left` 和 `.right` 分别设置了左右两列的样式，使用了 `flex` 属性来设置它们的宽度和自适应性。
- `.middle` 则设置了中间列的样式，使用了 `flex` 属性来让它占据剩余的空间。