justify-content:space-between 不起作用，Nextjs 应用程序答案

【问题标题】：justify-content:space-between not work, Nextjs applicationjustify-content:space-between 不起作用，Nextjs 应用程序
【发布时间】：2021-06-17 01:42:29
【问题描述】：

我的 Next.js 应用程序的容器中有两个 div，justify-content: space-between; 不起作用，但 justify-content: center; 工作正常。当我将相同的代码复制并粘贴到 index.html 文件上时，它可以正常工作。

export default function Home() {
  return(
    <div className={styles.container}>
      <div>1</div>
      <div>2</div>
    </div>
  );
}

css 文件

.container {
  padding: 2rem 2rem;
  display: flex;
  justify-content: space-between;
}
.container div {
  color: red;
  font-size: 35px;
}

【问题讨论】：

您似乎缺少一个结束 div 标记。请为 CSS 问题发布呈现的 HTML。
没有设置为 justify-content 的值很重要，因为您的 flex 没有设置任何宽度。

标签： html css reactjs flexbox next.js

【解决方案1】：

如果不设置 div 的宽度，justify-content: space-between 不起作用。请先设置 div 的宽度，如下所示。

.container {
  padding: 2rem 2rem;
  display: flex;
   width: //whatever width you want
  justify-content: space-between;
}

【讨论】：

【解决方案2】：

我认为“className”是错误的，“class”是正确的。

<div class="container">
  <div>1</div>
  <div>2</div>
</div>

css代码：

.container {
   padding: 2rem 2rem;
   display: flex;
   justify-content: space-between;
}
.container div {
  color: red;
  font-size: 35px;
}

【讨论】：

正如作者所说，使用react框架，className是给元素设置css类的正确方式。