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

我经常用CSS

display:grid

创建一个响应性强的3列网格。网格中的HTML标记有3个

div

项，因此网格创建3列

显示：网格；
网格间距：2rem；
网格模板列：重复（自动填充，最小值（300px，1fr））；

当您调整窗口大小时，它将折叠为1列，如预期的那样：

.hero模块{
显示：网格；
网格间距：2rem；
网格模板列：重复（自动填充，最小值（300px，1fr））；
}
.英雄模块.英雄物品{
边框：1px实心#000；
文本对齐：居中；
}
.英雄模块.英雄项目h3{
字体大小：22px；
文本对齐：居中；
}

项目名称
Lorem ipsum dolor sit amet，奉献精英。这是我的口述

阅读更多
项目名称
Lorem ipsum dolor sit amet，奉献精英。这是我的口述

阅读更多
项目名称
Lorem ipsum dolor sit amet，奉献精英。这是我的口述

阅读更多

简单的答案是：

网格容器的自动宽度本质上是如果它不是网格容器时的宽度

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

在第二个示例中，网格容器宽度是具有默认包覆面处理行为的祖先flex项的宽度，该行为取决于其内容的宽度，即文本“Lorem ipsum dolor sit amet，concetetur adipising elit.Dicta est ipsa recusandae”（更直接地说，网格容器的宽度是前面引用的句子的宽度。）

扩展答案：

网格容器（

.hero modules

）具有

宽度：auto

（默认值）。根据：

作为块格式上下文中的块级别框，其大小与建立格式上下文的块框类似，自动内联大小的计算方式与未替换的块框相同

在本例中，“自动内联大小”只是表示

width:auto

的另一种方式。（在垂直文本中，“自动内联大小”是

height:auto

）

“建立格式上下文的块框”与具有

display:flow root

的框相同。将

display:grid

更改为

display:flow root

将演示根据

width:auto

计算网格容器宽度时使用的宽度

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

弹性项的大小来自

flex-grow:0

和

flex-shorn:1

（默认值），这会使其宽度收缩而不增长。弹性项宽度的基础是

flex-basis:auto

（默认值），解析为

flex-basis:content

。内容是文本“我是一位杰出的教师，我是一位杰出的教师。”

现在我们知道了flex项为什么不展开，以及它的宽度是基于什么的

修复此布局：

此弹性布局不应基于列，而应基于行。列位于唯一弹性项目内，但不是弹性项目本身，需要在x轴而不是y轴上具有尺寸灵活性

因此，

flex-direction:column

需要变成

flex-direction:row

flex布局需要增长（在x轴上）以适应可用空间，因此需要在flex项（

.box

）上指定

flex增长：1

）

最后，如果需要水平居中，

网格模板列

值应使用

自动调整

，而不是

自动填充

。网格项可以使用应用于网格容器元素的

对齐内容：中心

居中

（使用

自动填充

，不可见的占位符网格项将被放置以填充布局，这将导致当前的三个网格项向左对齐，一组不可见的占位符项填充其右侧的剩余空白。使用

自动适配

，这些占位符网格项将被简单地丢弃并且该空间可用于水平对齐。）

.hero{
背景颜色：粉红色；
显示器：flex；
最小高度：600px；
弯曲方向：行；
对齐项目：居中；
证明内容：中心；
边框：1px实心#000；
}
.盒子{
边框：1件带点#000；
柔性生长：1；
文本对齐：居中；
}
.按钮装置{
文本对齐：居中；
边缘顶部：20px；
}
.英雄模块{
显示：网格；
网格间距：2rem；
网格模板列：重复（自动拟合，最小值（200px，1fr））；
证明内容：中心；
}
.英雄模块.英雄物品{
边框：1px实心#000；
文本对齐：居中；
}
.英雄模块.英雄项目h3{
字体大小：22px；
文本对齐：居中；
}

看看这些新功能
项目名称
这句话的意思是：“我的同僚们都是精英，我的同僚们都是精英。”


知识是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。
莫莱斯蒂亚斯·苏西比特（Molestias suscipit quia laudantium labour um nemo ab officia）当然，她是一个温柔的女人！

然后，所有div将作为网格，有关更多信息，请参阅下面的链接。

---

您可以使用

display:flex

属性执行此操作。下面是它的代码

.hero模块{
显示器：flex；
}
.英雄模块.英雄物品{
弹性：1；
利润率：10px；
边框：1px实心
Add **display:flex** property to your main container.

 .Main {
     display:flex;
  }
 div {
   flex: 1;
 }