通过flex实现圣杯布局

以下是使用flex实现圣杯布局的方法：

HTML代码：

<div class="container">
  <div class="main">Main Content</div>
  <div class="left">Left Sidebar</div>
  <div class="right">Right Sidebar</div>
</div>

CSS代码：

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

.main {
  flex: 1;
  order: 2;
}

.left {
  flex: 0 0 200px;
  order: 1;
}

.right {
  flex: 0 0 200px;
  order: 3;
}

解释：
1. 将父元素设置为flex布局，并使用flex-wrap: wrap;使子元素在一行排不下时自动换行。
2. 将左右两个侧边栏的flex-basis设置为200px，使其宽度固定。
3. 将主要内容的flex-grow设置为1，使其自适应剩余空间。
4. 使用order属性调整子元素的顺序，使左侧边栏在前，主要内容在中间，右侧边栏在后。