英文:
Flex column causes auto-fit grid to have single column
问题
我有一个CSS网格，它在我将其包装在一个弹性列中之前工作得很好。下面是我能够简化的最小示例。示例显示"hello" div以单列方式显示，而我原本希望有多列。我发现我可以通过添加.grid { width: 100% }或删除.wrapper { align-items: flex-start; }来修复这个问题，但我不明白为什么这两者都可以解决问题。这个问题让我花费了数小时进行调试，我真的想了解支配这种行为的基本规则，以便将来避免类似的错误。
.wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.grid {
display: grid;
/* width: 100%; */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
<div class="wrapper">
<div class="grid">
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
</div>
</div>
英文:
I have a css grid that works fine until I wrap it in a flex column. Below is the most minimal example I could narrow it down to. The example shows the hello divs are displayed in a single column, when I was expecting multiple columns. I've found I can fix this and make the grid layout as expected by either adding .grid { width: 100% } or removing the .wrapper { align-items: flex-start; } however I do not understand why either fixes the problem. This issue caused me hours of debugging and I would really like to understand the underlying rules governing this behavior so I can avoid similar mistakes in the future.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.grid {
display: grid;
/* width: 100%; */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
<!-- language: lang-html -->
<div class="wrapper">
<div class="grid">
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<div>hello</div>
</div>
</div>
<!-- end snippet -->
答案1
得分: 1
When you set the flex container (.wrapper) to align-items: flex-start, it packs the flex item (.grid) to the start of the container. See the image below, with added borders for illustration.
.wrapper = 弹性容器 = 黑色边框
.grid = 弹性项目 = 红色边框
注意，弹性列具有最小宽度为100px，根据网格代码。
当您移除 align-items: flex-start 时，容器回退到其默认设置：align-items: stretch，这为 .grid 提供了在容器中使用水平空间的全部功能。
当您将 .grid 设置为 width: 100% 时，它会覆盖 align-items 并且，就像 stretch 一样，为 .grid 提供了在水平空间中的全部使用权。
英文:
When you set the flex container (.wrapper) to align-items: flex-start, it packs the flex item (.grid), to the start of the container. See the image below, with added borders for illustration.
.wrapper = flex container = black border
.grid = flex item = red border
Notice that the flex column has a minimum width of 100px, per the grid code.
When you remove align-items: flex-start, the container falls back to its default setting: align-items: stretch, which provides .grid with full use of the horizontal space in the container.
When you set .grid to width: 100%, it overrides align-items and, like with stretch, provides .grid with full use of the horizontal space.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论