作为flexbox子代的CSS网格表现不尽如人意

Question

我经常使用CSS创建一个响应式3列网格display: grid.我在网格中的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中使用此网格,使封闭框居中以浮动链接背景:

正如您所看到的,网格会折叠(仅添加虚线边框以显示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

简单回答:

网格容器的自动宽度基本上是它不是网格容器时的任何宽度.

在第一个示例中,网格容器宽度仅受文档宽度和任何默认边距的约束.

在第二个示例中,网格容器宽度是祖先弹性项目的宽度,默认收缩包裹行为取决于其内容的宽度,文本" Lorem ipsum dolor sit amet,consectetur adipisicing elit.Dicta est ipsa recusandae. "(更直接地说,网格容器的宽度是前面引用的句子的宽度.)

扩展答案:

网格容器(.hero-modules)具有width: auto(默认值).按https://drafts.c​​sswg.org/css-grid/#grid-container:

作为块格式化上下文中的块级框,其大小类似于建立格式化上下文的块框,其自动内联大小计算为非替换块框.

width: auto在这种情况下,术语"自动内联大小"只是另一种说法.("自动内联大小"是height: auto垂直文本.)

"建立格式化上下文的块框"与包含的框相同display: flow-root.更改display: grid为display: flow-root将演示用于计算网格容器宽度的宽度width: auto.

所以现在我们知道网格容器大小的来源.

flex项的大小来自flex-grow: 0和flex-shrink: 1(默认值),这使得它的宽度缩小而不会增长.弹性项目宽度的基础是flex-basis: auto(默认值),它解析为flex-basis: content.内容是" Lorem ipsum dolor sit amet,consectetur adipisicing elit.Dicta est ipsa recusandae. "

所以现在我们知道为什么flex项不会扩展以及它的宽度是基于什么的.

修复此布局:

此flex布局不应基于列; 它应该是基于行的.列位于唯一的柔性项目内,但不是弹性项目本身,并且在x轴而不是y轴上需要尺寸灵活性.

所以,flex-direction: column需要成为flex-direction: row.

flex布局需要增长(在x轴上)以适应可用空间,因此flex-grow: 1需要在flex项目(.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>