找到一种在此布局中正确实现 <main> 标记的方法答案

【问题标题】：Finding a way to properly implement <main> tag in this layout找到一种在此布局中正确实现 <main> 标记的方法
【发布时间】：2019-08-05 12:36:39
【问题描述】：

我正在为一个项目设计 HTML，正如您在连接的图片中看到的那样，我有一个关于正确实现 <main> 标记的问题。

我的布局在侧边栏和内容上方有一个内容标题，这使我无法将侧边栏保持在 main 标记之外。

有人有解决办法吗？

我尝试将侧边栏代码放在 HTML 结构中的内容下方，并如图所示使用 flexbox 反向行显示它，但是一旦我将我想要的内容包装在 <main> 语义标签中，一切都会中断。

【问题讨论】：

请将您的尝试显示为代码。您可以在 Stack Overflow 上使用 Stack Snippets 来执行此操作。
除异端猴子的建议外，至少非常在您的问题中发布您的minimal reproducible example 代码。
这是一个（定义明确、重点狭窄的）“操作方法”问题，而不是调试问题。
是否有原因需要成为main 标签？你可以用 CSS-Grid 中的一个包装器来完成整个事情吗？我们不应该纯粹为了“语义”而添加元素......网络真的不在乎。我们应该确保 if 元素被使用，它们是语义的......而不是相反。
嗨@Paulie_D，我只是愚蠢地遵循最佳实践，我很惊讶这个案例数字 - 这似乎很基本 - 正在引起摩擦。那时我只是在这里寻求专业知识来帮助我解决这个案子。如果没有解决方案，我就删除主标签。

标签： html css flexbox semantic-markup

【解决方案1】：

使用display: contents; 阻止main 元素对布局产生任何影响。然后将其子代布置为main 的兄弟姐妹而不是它的子代。

body {
  background: black;
  display: grid;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "header header header" "content-header content-header content-header" "sidebar content content";
  margin: 0;
  padding: 0;
  height: 100vh;
}

header {
  background: #aaf;
  grid-area: header;
}

main {
  display: contents;
}

main header {
  background: #faa;
  grid-area: content-header;
}

main #content {
  background: #afa;
  grid-area: content;
}

aside {
  background: #aff;
  grid-area: sidebar;
}

<header>
  header
</header>
<main>
  <header>
    content header
  </header>
  <div id="content">
    content
  </div>
</main>
<aside>
  sidebar
</aside>

【讨论】：

'虽然支持display:contents。
感谢 Quentin 的解决方案和 @Paulie_D 的警告，我会尽力解决这个问题！