使用flex布局设计一个网页

好的，以下是一个简单的例子：

HTML代码：

<div class="container">
  <header>
    <h1>网页标题</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#">导航1</a></li>
      <li><a href="#">导航2</a></li>
      <li><a href="#">导航3</a></li>
      <li><a href="#">导航4</a></li>
    </ul>
  </nav>
  <main>
    <section>
      <h2>内容标题</h2>
      <p>这里是内容</p>
    </section>
    <aside>
      <h2>侧边栏标题</h2>
      <ul>
        <li>侧边栏内容1</li>
        <li>侧边栏内容2</li>
        <li>侧边栏内容3</li>
      </ul>
    </aside>
  </main>
  <footer>
    <p>版权信息</p>
  </footer>
</div>

CSS代码：

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

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

nav {
  background-color: #f2f2f2;
  padding: 10px;
}

nav ul {
  display: flex;
  list-style-type: none;
}

nav li {
  margin-right: 20px;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

main {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  padding: 20px;
}

section {
  flex-basis: 70%;
  padding-right: 20px;
}

aside {
  flex-basis: 30%;
}

footer {
  background-color: #f2f2f2;
  padding: 10px;
  margin-top: auto;
}

这个例子使用了flex布局来设计一个简单的网页，其中包括一个header、一个nav、一个main，以及一个footer。在main中，使用了flex-wrap来让section和aside在不同屏幕宽度下自动换行，并且使用了flex-basis来设置它们的宽度比例。