项目vue 三栏布局

三栏布局可以使用 flex 布局或者 grid 布局实现，也可以使用传统的 float 布局实现。

以下是使用 flex 布局实现三栏布局的示例代码：

HTML 代码：

<div class="container">
  <div class="left-column"></div>
  <div class="middle-column"></div>
  <div class="right-column"></div>
</div>

CSS 代码：

.container {
  display: flex;
}

.left-column {
  flex: 1;
}

.middle-column {
  flex: 2;
}

.right-column {
  flex: 1;
}

以上代码中，.container 是三栏布局的容器，使用 display: flex; 将其设置为 flex 布局。.left-column、.middle-column 和 .right-column 分别是左、中、右三个栏目的容器，使用 flex 属性设置它们的占比，例如 flex: 1; 表示占据父容器的 1/4，flex: 2; 表示占据父容器的 1/2。

如果需要实现三栏布局的响应式设计，可以使用媒体查询和 flex-wrap 属性，例如：

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

.left-column {
  flex: 1;
}

.middle-column {
  flex: 2;
}

.right-column {
  flex: 1;
}

@media screen and (max-width: 768px) {
  .left-column,
  .right-column {
    flex: none;
    width: 100%;
  }
}

在上面的代码中，使用 flex-wrap: wrap; 将 .container 设置为换行模式，当屏幕宽度小于 768px 时，将 .left-column 和 .right-column 的 flex 属性设置为 none，使它们不再占据空间，然后将它们的宽度设置为 100%。这样就可以实现在小屏幕下三栏布局变为两栏布局的效果。