请帮我设计一个flex布局的圣杯布局

好的，下面是一个基于flex布局的圣杯布局：

HTML代码：

<div class="container">
  <div class="center-column">
    <main class="main-content">主要内容</main>
  </div>
  <div class="left-column">左侧内容</div>
  <div class="right-column">右侧内容</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 500px;
}

.center-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
}

.left-column,
.right-column {
  flex-basis: 200px;
}

.left-column {
  order: -1;
}

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .left-column,
  .right-column {
    flex-basis: auto;
  }
}

解析：

1. 使用 `display: flex` 将父容器设置为弹性布局。
2. 使用 `flex-direction: row` 将子元素的排列方向设置为水平方向。
3. 使用 `justify-content: space-between` 将子元素沿主轴方向（即水平方向）均匀分布。
4. 将 `.center-column` 的 `flex` 属性设置为 1，使其占据剩余空间的全部宽度。
5. 将 `.main-content` 的 `flex` 属性设置为 1，使其占据 `.center-column` 的全部高度。
6. 将 `.left-column` 和 `.right-column` 的 `flex-basis` 属性设置为 200px，限制其宽度。
7. 将 `.left-column` 的 `order` 属性设置为 -1，使其在水平方向上排在最前面。
8. 使用媒体查询 `@media` 设置宽度小于等于768px时，将子元素的排列方向设置为垂直方向，并且将 `.left-column` 和 `.right-column` 的 `flex-basis` 属性设置为自适应。