无法在 next.js 布局中正确设置宽度 - React、Next.js、CSS答案

【问题标题】：Can't properly set width in next.js Layout - React, Next.js, CSS无法在 next.js 布局中正确设置宽度 - React、Next.js、CSS
【发布时间】：2023-02-08 22:59:42
【问题描述】：

我对这件事很疯狂。我正在使用 Next.js、React 和简单的 CSS 构建一个 Portfolio。我想要得到的布局是这样的：

页眉、导航和页脚在wrapper 内，wrapper 在container 和main 内。我想将 wrapper 的 width 设置为类似 30vw 的东西，但我做不到，因为当我设置每个尺寸时，它不会反映出来，除非我还设置了宽度main。所有这些都在 Layout 组件中，因为它应该在其他页面之间共享。

.container {
  min-height: 100vh;
  display: flex;
}

/* --------------- WRAPPER --------------- */
.wrapper {
  width: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.header {
  width: 100%;
  background-color: blue;
}
.navigation {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgb(64, 156, 156);
}
.footer {
  width: 100%;
  background-color: darkslategray;
}
/* --------------- MAIN --------------- */
.main {
  width: 10px;
  background-color: brown;
}

哪个是问题？这是链接 GitHub Repo 更好地理解整体。

【问题讨论】：

标签： html css reactjs next.js flexbox

【解决方案1】：

问题是您将 .wrapper 的宽度设置为 10px，这不是您想要的。要实现所需的布局，您需要将 .wrapper 的宽度设置为 30vw。此外，还需要为 .main 元素指定一个宽度值，以便布局正确。

尝试将 CSS 更新为以下内容：

  .container {
    min-height: 100vh;
    display: flex;
  }

  /* --------------- WRAPPER --------------- */
  .wrapper {
    width: 30vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .header {
    width: 100%;
    background-color: blue;
  }

  .navigation {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgb(64, 156, 156);
  }

  .footer {
    width: 100%;
    background-color: darkslategray;
  }

  /* --------------- MAIN --------------- */ 
  .main {
    width: 70vw;
    background-color: brown;
  }

【讨论】：