CSS - 将 flex 容器的子容器与屏幕中心对齐无法正常工作

Question

我正在制作一个类似 Etch-a-Sketch 的小型网页。

现在，我只是试图在移动到将生成指定大小的 Canvas 的 Javascript 之前获取页面的 CSS，因此我在网页上静态使用 16x16 的 div 网格。

参见 this codepen对于我到目前为止所拥有的。抱歉 HTML 太长了，正如我所说，我现在正在处理格式并放入 16x16 网格(800px x 800px)类 .tabletCanvas。基本上，只有 256 个具有该类的 div。

如您所见，“ Canvas ”贴在左侧，我希望它看起来像这样 in this picture (使用 photoshop 在 5 分钟内完成了非常粗略的轮廓)。

到目前为止我尝试了什么:

• flex: 有许多不同的值。发生的情况是，如果不设置 max-width 或 max-height(根据我对 flexbox 的理解，指定特定的高度和宽度会破坏使用它的目的，并且一切应通过 flex: 属性处理)，网格将简单地向右溢出并填满屏幕的其余部分。显然不理想，因为我希望它包含在 800x800 像素内，即使在指定了 max-width 和 height 之后，它仍然会卡在左边。
• 使 tabletContainer 本身成为 flex 父级(容器)，并尝试所有可能的 align-content、align-items 和 justify-content 在其中。它们都没有明显的效果
• .tabletCanvas 类中 align-self、justify-self 的许多不同值。
• 突然想到的一件事是绝对定位 Canvas div，但我想这首先违背了使用 flex 容器的目的

我认为可能有用的方法是使用 #bodyWrapper 上的 align-content 或 align-items 属性来获取所有它的子项居中，但是，如果我这样做，那么我就有可能破坏所有其他属性的流程，并或多或少地让自己回到我开始的地方。

我想到的另一件事是向 #sketchButtons 添加大量的 padding-left，但这似乎也是一种可笑的错误和 hacky 方法拿。

我们将不胜感激任何帮助。

Answer 1

我做了一个jsfiddle draft您的案例具有简化的样式。我希望你能分析代码并找出方法。

简而言之，它只是一个居中的 flex 列和绝对定位的菜单。

html, body {
  width: 100%;
  height: 100%;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}


.content {
  display: flex;
  justify-content: center;
 
  width: 100%;
  height: 100%;
  
  position: relative;
}

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  
  width: 50%;
  height: 50%;
  
  border: 1px solid black;
}

.menu {
  display: flex;
  flex-direction: column;
  
  position: absolute;
  left: 10px;
  top: 0;
}

<div class="app">
  <h1>Header</h1>
  <div class="content">
    <nav class="menu">
      <button>Menu item</button>
      <button>Menu item</button>
      <button>Menu item</button>
    </nav>
    <div class="grid">Grid</div>
  </div>
</div>