flex实现双飞翼，圣杯布局（三栏布局）-CSDN博客

本文链接：https://blog.csdn.net/2302_76925238/article/details/148928258

圣杯

<template>
  <div class="layout">
      <div class="center">中间内容</div>
    <div class="left">左侧栏</div>
    <div class="right">右侧栏</div>
  </div>
</template>


<script setup lang="ts">
</script>

<style scoped>
.layout {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.left {
  width: 100px;
  background-color: pink;
  order: 1;
}

.right {
  width: 100px;
  background-color: lightgreen;
  order: 3;
}

.center {
  flex: 1; /* 中间自适应宽度 */
  background-color: lightblue;
  order: 2;

}

</style>

双飞翼布局

<template>
  <div class="double-wing-layout">
    <div class="left">左侧栏</div>

    <div class="main">
      <div class="center">中间内容</div>
    </div>

    <div class="right">右侧栏</div>
  </div>
</template>

<style scoped>
.double-wing-layout {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.left {
  width: 200px;
  background: pink;
}

.right {
  width: 150px;
  background: lightgreen;
}

/* main 是中间容器 */
.main {
  flex: 1;
  display: flex;
}

.center {
  flex: 1;
  background: lightblue;
}
</style>