justify-content 在 Flex 和 Grid 布局中的工作方式不同答案

【问题标题】：justify-content works differently in Flex and Grid layoutsjustify-content 在 Flex 和 Grid 布局中的工作方式不同
【发布时间】：2018-05-03 11:12:57
【问题描述】：

我想知道为什么要使用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

【问题讨论】：

标签： css flexbox grid-layout css-grid

【解决方案1】：

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

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

如果网格的外边缘不对应于网格容器的内容边缘（例如，如果没有列是 flex 大小的），网格轨道在内容框内根据 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?

【讨论】：