vue 网页基本布局

记录一下项目的基本布局，日后直接使用

//flex: 0 0 200px指： flex-grow、flex-shrink和flex-basis。Flexbox项目不会伸展或缩小，且其初始宽度为200像素

  // 1. flex-grow：此属性决定了项目在剩余空间中的放大比例。默认值为0，意味着在默认情况下，项目不会扩展以占用剩余空间。
  // 2. flex-shrink：此属性决定了项目在空间不足时的缩小比例。默认值为1，这意味着项目在空间不足时将缩小以适应容器。
  // 3. flex-basis：此属性决定了项目的初始大小。在这个例子中，200px表示项目的初始宽度为200像素。

<template>
  <div class="container">
    <header class="header">Header</header>
    <div class="content">
      <aside class="left">Left Sidebar</aside>
      <main class="right">
        <div class="right-nav">
          <ul style="display: flex">
            <li style="margin-right: 10px" v-for="n in 3" :key="n">
              Nav Item {{ n }}
            </li>
          </ul>
        </div>
        <div class="right-content">
          <p v-for="n in 100" :key="n">Content line {{ n }}</p>
        </div>
      </main>
    </div>
    <footer class="footer">Footer</footer>
  </div>
</template>

<script>
export default {
  name: "AdaptiveLayout",
};
</script>

<style scoped lang="scss">
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 1920px;
  //   height: 1080px;
  margin: auto;
}

.header {
  flex: 0 0 auto;
  background-color: #f5f5f5;
  padding: 10px;
  text-align: center;
}

.content {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;

  .left {
    flex: 0 0 200px;
    background-color: #d3d3d3;
    padding: 10px;
  }

  .right {
    flex: 1 1 auto;
    background-color: #e3e3e3;
    overflow-y: auto;

    .right-nav {
      //flex: 0 0 200px指：  flex-grow、flex-shrink和flex-basis。Flexbox项目不会伸展或缩小，且其初始宽度为200像素

      // 1. flex-grow：此属性决定了项目在剩余空间中的放大比例。默认值为0，意味着在默认情况下，项目不会扩展以占用剩余空间。
      // 2. flex-shrink：此属性决定了项目在空间不足时的缩小比例。默认值为1，这意味着项目在空间不足时将缩小以适应容器。
      // 3. flex-basis：此属性决定了项目的初始大小。在这个例子中，200px表示项目的初始宽度为200像素。

      flex: 0 0 200px;
      background-color: #c3c3c3;
      padding: 10px;
      position: sticky;
      top: 0;
      height: fit-content;
    }

    .right-content {
      flex: 1 1 auto;
      background-color: #e3e3e3;
      padding: 10px;
    }
  }
}

.footer {
  flex: 0 0 auto;
  background-color: #f5f5f5;
  padding: 20px; // 类似于其高度
  text-align: center;
}
</style>