Flex Box 响应式布局答案

【问题标题】：Flex Box Responsive Layout [closed]Flex Box 响应式布局
【发布时间】：2021-05-16 22:55:10
【问题描述】：

我正在为学校开发 flex-box 响应式项目。但我有问题。我第一次这样做时，代码完全一团糟，无法使其响应。有人可以帮我做这个布局吗？我已经砸了大约 6 个小时了，现在这是我需要做的布局。它必须是 flexbox 和响应式的：

【问题讨论】：

嗨，欢迎来到 SO。请将您的尝试发布为最小可重现代码 sn-p (ctrl + m) 并告诉我们您卡在哪里。 SO 不是用户为您编写代码的平台。它仅适用于特定的编码问题。意味着我们帮助调试而不是为您编写整个代码。

【解决方案1】：

    <div style="display:flex; flex-direction:column; ">
       <header>header</header>
       <main style="display:flex;flex-direction:row;">
         <div style="width:70%; height:auto;">article1</div>
         <div style="width:30%;height:auto; display:flex; flex-direction:column;">
             <div>menu</div>
            <div>article2</div>
         </div>
      </main>
       <footer>footer</footer>


   </div>

【讨论】：

嗨，欢迎来到 SO。请始终对您的解决方案给出充分的解释，以便重现。具有无法解释的代码行的 Anwsers 被认为是低质量的。

【解决方案2】：

页眉和页脚不需要灵活。

尝试：

.container {
  display: flex;
}

.article1 {
  flex: 2;
}

aside {
  display: flex;
  flex-direction: column;
  flex: 1;
}

<div class="container">
  <div class="article1"></div>
  <aside>
    <div class="menu"></div>
    <div class="article2"></div>
  </aside>
</div>

【讨论】：

嗨，欢迎来到 SO。请始终对您的解决方案给出充分的解释，以便重现。还将您的代码发布为 sn-p (ctrl + m) 并使其在视觉上完整，以表明您的解决方案有效。 try this... + unexplained code lines 的 Anwsers 被认为是低质量的。