调整内容在Flex和Grid布局中的工作方式不同

Question

我想知道为什么使用 justify-content

网格项目占用整个空间

可用，而不是在网格中使用。

与justify-content：https : //codepen.io/whisher/pen/JOpYdp

没有：https : //codepen.io/whisher/pen/pdajjb

.wrapper {
  background-color: red;
  width: 500px;
  height: 400px;
  border: 2px solid #CCC;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 80px);
  grid-template-rows: repeat(3,100px);
  align-content: space-around;
  justify-content: space-between;
}

我的意思是我希望像使用flex一样

https://codepen.io/whisher/pen/YEewaW

Answer 1

在flex布局中，justify-content属性在flex项之间或周围（根据值）在容器中分配可用空间。

8.2。轴对齐：justify-content 属性

该justify-content属性使flex项目沿着flex容器当前行的主轴对齐。...通常，当一行上的所有伸缩项目都不灵活或已达到最大大小时，它可以帮助分配剩余的剩余可用空间。

在网格布局中，该justify-content属性在网格列之间或周围的容器中分配可用空间（取决于值）。

注意flex的区别：在这里，justify-content对齐网格列，而不是网格项。

10.5。对齐网格：justify-content和align-content 属性

如果网格的外边缘不对应于网格容器的内容边缘（例如，如果没有列的大小是可变的），则网格轨迹将根据网格容器上的justify-content和align-content属性在内容框中对齐 。

这是布局中的网格列轨迹...

...没有justify-content: space-between：

...以及justify-content: space-between：

这是一篇相关的文章，可能有助于进一步了解：

• 网格布局中align-items与align-content有什么区别？