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

Question

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

网格项占满space

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

和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 items 之间或周围的容器中分配免费 space（取决于值).

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 属性在 网格列 之间或周围的容器中自由分布 space（取决于值).

注意与 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:

这里有一个相关的 post 可能有助于进一步理解：

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

justify-content works differently in Flex and Grid layouts

css

flexbox

grid-layout

css-grid