对齐和嵌套div（CSS布局麻烦）

Question

我想实现以下布局：

这是我目前的HTML：

<div id="main">
    <div id="content1">
        <span>Content1</span>
        <div id="text">
            <span>Text</span>
        </div>
        <div id="game">
            <span>Game</span>
        </div>
    </div>
    <div id="content2">
        <span>Content2</span>
        <div id="gallery">
            <span>Gallery</span>
        </div>
    </div>
</div>
<div id="footer">
    <span>Footer</span>
</div>

中间部分包含在主div中。左侧部分是内容1，右侧部分是content2。 Content1分为两部分（嵌套div）。几个小时我一直在努力解决这个简单的任务。我试图做的事情，但遇到了麻烦：

• 我希望这个网站占据浏览器宽度的100％
• 我能够分割content1和content2并将它们放在同一行中，但是当我添加边框时，我无法再对齐它们（我尝试了溢出：隐藏;，显示：内联块;和flex显示，但不知怎的，我无法让它工作..）
• 将内容中的元素居中（如果我使用margin：auto，那就足够了吗？） 我也想知道我发布的HTML布局是否正常，因为我不知道嵌套的数量是多少？或者是嵌套通常用于容器等？谢谢你的帮助

Answer 1

您可以使用嵌套的Flexbox

执行此操作

.content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main {
  display: flex;
  flex: 1;
}
.right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
}
.left {
  display: flex;
  border: 1px solid black;
  flex-direction: column;
  flex: 1;
}
.one {
  flex: 2;
}
.two {
  flex: 1;
  border-top: 1px solid black;
}
header,
footer {
  background: lightblue;
  height: 50px;
}

<div class="content">
  <header>Header</header>
  <div class="main">
    <div class="left">
      <div class="one">One</div>
      <div class="two">Two</div>
    </div>
    <div class="right">Right</div>
  </div>
  <footer>Footer</footer>
</div>