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

Posted 2023-03-05

【中文标题】justify-content:space-between 不起作用，Nextjs 应用程序

【英文标题】：justify-content:space-between not work, Nextjs application

【发布时间】：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 没有设置任何宽度。

【参考方案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类的正确方式。