利用flex设计一个页面

好的，以下是一个简单的利用 flex 布局的页面示例：

HTML 代码：

<div class="container">
  <div class="header">
    <h1>Flex布局示例</h1>
  </div>
  <div class="content">
    <div class="sidebar">
      <ul>
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a></li>
        <li><a href="#">菜单3</a></li>
      </ul>
    </div>
    <div class="main">
      <p>这是主要内容区域，利用flex布局实现左侧菜单栏和右侧内容区域的自适应布局。</p>
    </div>
  </div>
  <div class="footer">
    <p>版权所有 © 2021 Flex布局示例</p>
  </div>
</div>

CSS 代码：

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

.content {
  display: flex;
  flex: 1;
}

.sidebar {
  background-color: #f2f2f2;
  width: 200px;
  padding: 20px;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar li {
  margin-bottom: 10px;
}

.sidebar a {
  color: #333;
  text-decoration: none;
}

.main {
  padding: 20px;
  flex: 1;
}

.footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

这个页面包含了一个顶部的标题栏、左侧的菜单栏和右侧的内容区域，底部有一个版权信息。利用 flex 布局，可以实现左侧菜单栏和右侧内容区域的自适应布局，同时保证整个页面高度占满整个浏览器窗口。