html - 作为 flexbox 子项的 CSS 网格未按预期运行

Question

我经常使用 CSS display: grid 创建响应式 3 列网格。我在网格内的 HTML 标记有 3 个 div 项，因此网格创建了 3 列

display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

当您调整窗口大小时，它会按预期折叠为 1 列:

https://codepen.io/smlombardi/pen/oqMjrd?editors=1100

.hero-modules {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.hero-modules .hero-item {
  border: 1px solid #000;
  text-align: center;
}

.hero-modules .hero-item h3 {
  font-size: 22px;
  text-align: center;
}

<div class="hero-modules">
  <div class="hero-item">
    <div>
      <h3>Title of Item</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
    </div>
    <div>
      <a class="hero-read-more">Read more</a>
    </div>
  </div>

  <div class="hero-item">
    <div>
      <h3>Title of Item</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
    </div>
    <div>
      <a class="hero-read-more">Read more</a>
    </div>
  </div>

  <div class="hero-item">
    <div>
      <h3>Title of Item</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
    </div>
    <div>
      <a class="hero-read-more">Read more</a>
    </div>
  </div>
</div>

现在我需要在 Flexbox 中使用这个网格，使封闭框居中以 float 在链接背景上:

如您所见，网格折叠(添加虚线边框只是为了显示 flex 子项的范围)。

https://codepen.io/smlombardi/pen/PRBPWB?editors=1100

.hero {
  background-color: pink;
  display: flex;
  min-height: 600px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
}

.box {
  border: 1px dotted #000;
  text-align: center;
}

.button-unit {
  text-align: center;
  margin-top: 20px;
}

.hero-modules {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.hero-modules .hero-item {
  border: 1px solid #000;
  text-align: center;
}

.hero-modules .hero-item h3 {
  font-size: 22px;
  text-align: center;
}

<div class="hero">
  <div class="box">
    <div>
      <h1 class="hero-heading">Check out these new features</h1>
    </div>

    <div class="hero-modules">
      <div class="hero-item">
        <div>
          <h3>Title of Item</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
        </div>
        <div>
          <a class="hero-read-more">Read more</a>
        </div>
      </div>

      <div class="hero-item">
        <div>
          <h3>Title of Item</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
        </div>
        <div>
          <a class="hero-read-more">Read more</a>
        </div>
      </div>

      <div class="hero-item">
        <div>
          <h3>Title of Item</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
        </div>
        <div>
          <a class="hero-read-more">Read more</a>
        </div>
      </div>
    </div>

    <div class="button-unit">
      <button class="btn btn-secondary mb-3">Got It</button>
      <p>
        <a class="remind-me-later" href="">Remind me later</a>
      </p>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestias earum beatae, minima provident sunt a et? Voluptatibus sequi ipsum ad asperiores soluta odio, nam nobis quas non totam ut officiis itaque eveniet, maiores saepe id cum consequuntur.
      Molestias suscipit quia laudantium laborum nemo ab officia, nihil esse mollitia sunt!
    </div>
  </div>
</div>

为什么会这样？有什么我遗漏的东西不允许网格正常运行吗？

Answer 1

简单的答案:

如果网格容器不是网格容器，则网格容器的自动宽度基本上是任何宽度。

在第一个示例中，网格容器的宽度仅受文档宽度和任何默认边距的限制。

在第二个示例中，网格容器宽度是具有默认收缩包装行为的祖先 flex 元素的宽度，该行为取决于其内容的宽度，文本“Lorem ipsum dolor sit amet, consectetur adipisicing elit.Dicta est ipsa recusandae.”(更直接地说，网格容器的宽度就是前面引用的句子的宽度。)

扩展答案:

网格容器(.hero-modules)有width: auto(默认值)。每https://drafts.csswg.org/css-grid/#grid-container :

As a block-level box in a block formatting context, it is sized like a block box that establishes a formatting context, with an auto inline size calculated as for non-replaced block boxes.

在这种情况下，术语“自动内联大小”只是 width: auto 的另一种说法。 (“自动内联大小”在垂直文本中是 height: auto。)

“建立格式化上下文的 block 框”与带有display:flow-root的框相同。将 display: grid 更改为 display: flow-root 将演示由于 width: auto< 而使用什么宽度来计算网格容器的宽度.

现在我们知道网格容器大小的来源了。

flex 元素的大小来自flex-grow: 0 和flex-shrink: 1(默认值)，这使得它的宽度缩小而不是增加。 flex 元素宽度的基础是 flex-basis: auto(默认值)，解析为 flex-basis: content。内容是文本“Lorem ipsum dolor sit amet, consectetur adipisicing elit.Dicta est ipsa recusandae.”

那么现在我们知道了 flex 元素为什么不展开以及它的宽度是基于什么的。

修复此布局:

这个 flex 布局不应该是基于列的；它应该是基于行的。列位于唯一的 flex 元素内，但不是 flex 元素本身，并且 x 轴而非 y 轴需要尺寸灵 active 。

因此，flex-direction: column 需要变成 flex-direction: row。

flex 布局需要增长(在 x 轴上)以适应可用空间，因此需要在 flex 元素上指定 flex-grow: 1 (.box).

最后，如果需要水平居中，grid-template-columns 值应该使用auto-fit，而不是auto-fill。网格元素可以通过应用于网格容器元素的 justify-content: center 居中。

(使用auto-fill，不可见的占位符网格项将被放置以填充布局，这将导致当前的三个网格项与一堆不可见的占位符项向左对齐填充右侧剩余的空白空间。使用 auto-fit，这些占位符网格元素将被简单地丢弃，并且该空间被释放用于水平对齐。)

.hero {
  background-color: pink;
  display: flex;
  min-height: 600px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
}

.box {
  border: 1px dotted #000;
  flex-grow: 1;
  text-align: center;
}

.button-unit {
  text-align: center;
  margin-top: 20px;
}

.hero-modules {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: center;
}

.hero-modules .hero-item {
  border: 1px solid #000;
  text-align: center;
}

.hero-modules .hero-item h3 {
  font-size: 22px;
  text-align: center;
}

<div class="hero">
  <div class="box">
    <div>
      <h1 class="hero-heading">Check out these new features</h1>
    </div>

    <div class="hero-modules">
      <div class="hero-item">
        <div>
          <h3>Title of Item</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
        </div>
        <div>
          <a class="hero-read-more">Read more</a>
        </div>
      </div>

      <div class="hero-item">
        <div>
          <h3>Title of Item</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
        </div>
        <div>
          <a class="hero-read-more">Read more</a>
        </div>
      </div>

      <div class="hero-item">
        <div>
          <h3>Title of Item</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
        </div>
        <div>
          <a class="hero-read-more">Read more</a>
        </div>
      </div>
    </div>

    <div class="button-unit">
      <button class="btn btn-secondary mb-3">Got It</button>
      <p>
        <a class="remind-me-later" href="">Remind me later</a>
      </p>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestias earum beatae, minima provident sunt a et? Voluptatibus sequi ipsum ad asperiores soluta odio, nam nobis quas non totam ut officiis itaque eveniet, maiores saepe id cum consequuntur.
      Molestias suscipit quia laudantium laborum nemo ab officia, nihil esse mollitia sunt!
    </div>
  </div>
</div>