Flex Box 响应式布局

Question

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

Answer 1

页眉和页脚不需要弯曲。

尝试：

.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>

Answer 2

    <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>

Flex Box 响应式布局

Flex Box Responsive Layout

html

css

flexbox

responsive