css - 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

在 Flex 布局中，justify-content 属性会在 Flex 元素之间或周围分配容器中的可用空间(取决于值)。

8.2. Axis Alignment: the justify-content property

The justify-content property aligns flex items along the main axis of the current line of the flex container. ... Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

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

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

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

If the grid’s outer edges do not correspond to the grid container’s content edges (for example, if no columns are flex-sized), the grid tracks are aligned within the content box according to the justify-content and align-content properties on the grid container.

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

...没有 justify-content: space- Between:

...以及 justify-content: space- Between:

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

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