在最新的浏览器中 css 网格不支持 justify-content: stretch 吗？

Question

两者 MDN and csstricks 都提到我们可以 justify-content: stretch 扩展网格的轨道以填充其网格容器。虽然其他属性值（例如 justify-content: start; 和 justify-content: centre; 可以按预期工作，但前者在 chrome 和 firefox 中都不起作用。下面是演示：

.grid-container {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.grid-container.stretch {
  background-color: #9996f3;
  justify-content: stretch; /*no effect!!!*/
}

<h3>justify-content: space-evenly </h3>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

<h3>justify-content: stretch <small>(Doesn't work) </small></h3>

<div class="grid-container stretch">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

csstrick.com 建议的 justify-content: stretch 的预期行为应如下所示：

问：是不是浏览器支持问题？ MDN 表示它支持所有主要浏览器。我在这里错过了什么

Answer 1

据我了解，拉伸会改变任何自动调整大小的元素的宽度，但不会改变固定大小的元素的宽度。并且更改将使得这些调整大小的元素中的每一个都获得等量的 space.

MDN 是这样说的：

If the combined size of the items along the main axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.

因此，在此代码段中，其中两个的网格布局中的 50px 更改为自动，我们将其中两个拉伸到第二个容器中：

.grid-container {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: auto 50px auto; /*Changed from 50px for all*/
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.grid-container.stretch {
  background-color: #9996f3;
  justify-content: stretch; /*no effect!!!*/
}

<h3>justify-content: space-evenly </h3>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

<h3>justify-content: stretch <small>Allocates extra space among the auto sized elements</small></h3>

<div class="grid-container stretch">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

在最新的浏览器中 css 网格不支持 justify-content: stretch 吗？

Is justify-content: stretch not supported for css grid in the latest browsers?

html

css

layout

cross-browser

css-grid