justify-content在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

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

  

8.2. Axis Alignment: the justify-content property

     

justify-content属性沿主轴对齐弹性项目   Flex容器的当前行。 ......通常它有帮助   当所有弹性项目都打开时，分配额外的空闲空间   线条不灵活，或者是灵活的但已达到最大值   大小

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

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

  

10.5. Aligning the Grid: the justify-content and align-content properties

     

如果网格的外边缘与网格容器不对应   内容边（例如，如果没有列是弹性大小的），网格   轨道根据内容框在内容框中对齐   网格上的justify-content和align-content属性   容器

以下是布局中的网格列跟踪...

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

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

这是一篇有助于进一步理解的相关文章：

• What is the difference between align-items vs. align-content in Grid Layout?