Html Display flex正在覆盖显示网格布局
当我在显示网格布局中包含显示flex布局时，我在显示网格布局方面遇到了问题 在我的第一个例子中，我有我想要的网格布局。它分为5列，页眉占100%，页脚占100%，在它们之间我有一个过滤器元素占20%，一个items元素占60%，另一个aside元素占20%。这很有效 然而，在我的秒示例中，我在items网格中添加了一个flex项。当我这样做时，过滤器和旁边的元素不再保留预期的20%，items元素变得更大。似乎display flex正在覆盖 显示网格。我假设发生这种情况是因为显示网格和显示flex元素都从正常文档流中删除 所以我的问题是，如何在不丢失网格的预期布局过滤器-20%项目-60%搁置-20%的情况下，将display flex元素与网格的items元素一起使用 .标题{ 网格区域：标题； 背景颜色：珊瑚； } .过滤器{ 网格区域：过滤器； 背景颜色：海蓝宝石； } .项目{ 网格区域：项目； 背景色：淡天蓝； } .旁白{ 网格区域：侧边； 背景颜色：淡绿色； } .页脚{ 网格区域：页脚； 背景色：淡紫色； } .gridContainer{ 显示：网格； 网格模板区域：页眉过滤项页脚页脚页脚页脚旁边的项； } .gridContainer>div{ 填充：20px； } .flexContainer{ 显示器：flex； 柔性包装：包装； 证明内容：周围的空间； } 1.flexItem{ 背景颜色：米色； 保证金：0px 0px 20px 0px； } 例1： 标题 滤器 项目 项目 页脚 例2： 标题 滤器 项目 页脚Html Display flex正在覆盖显示网格布局,html,css,flexbox,css-grid,Html,Css,Flexbox,Css Grid,当我在显示网格布局中包含显示flex布局时，我在显示网格布局方面遇到了问题 在我的第一个例子中，我有我想要的网格布局。它分为5列，页眉占100%，页脚占100%，在它们之间我有一个过滤器元素占20%，一个items元素占60%，另一个aside元素占20%。这很有效 然而，在我的秒示例中，我在items网格中添加了一个flex项。当我这样做时，过滤器和旁边的元素不再保留预期的20%，items元素变得更大。似乎display flex正在覆盖 显示网格。我假设发生这种情况是因为显示网格和显示fl
您需要定义这些百分比，否则默认情况下，内容将定义宽度。只需将每列设置为1fr，即可获得所需结果： .标题{ 网格区域：标题； 背景颜色：珊瑚； } .过滤器{ 网格区域：过滤器； 背景颜色：海蓝宝石； } .项目{ 网格区域：项目； 背景色：淡天蓝； } .旁白{ 网格区域：侧边； 背景颜色：淡绿色； } .页脚{ 网格区域：页脚； 背景色：淡紫色； } .gridContainer{ 显示：网格； 网格模板列：重复5,1fr； 网格模板区域： 标题标题标题 将项目过滤到一旁 页脚页脚页脚页脚； } .gridContainer>div{ 填充：20px； } .flexContainer{ 显示器：flex； 柔性包装：包装； 证明内容：周围的空间； } 1.flexItem{ 背景颜色：米色； 保证金：0px 0px 20px 0px； } 例1： 标题 滤器 项目 项目 页脚 例2： 标题 滤器 项目 页脚