前端页面中几种常用的flex布局

以下是前端开发中，常见的几种页面布局，使用flex实现

1.布局一

image.png

 <div class="container">
    <header>header</header>
    <article>mian</article>
    <footer>footer</footer>
  </div>

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  background-color: #666;
  height: 80px;
}
article {
  background-color: #ccc;
  flex: auto;
}
footer {
  background-color: #666;
  height: 150px;
}

2.布局2

image.png

 <div class="container">
    <header>头部</header>
    <div class="box">
      <aside>侧边栏</aside>
      <article>主体区域</article>
    </div>
    <footer>底部</footer>
  </div>

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  background-color: #666;
  height: 80px;
}

.box {
  flex: auto;
  background-color: #f5f5f5;
  display: flex;
}
aside {
  background-color: aqua;
  width: 80px;
}

article {
  background-color: #ff3040;
  flex: auto;
}
footer {
  background-color: #666;
  height: 150px;
}

3.布局3

image.png

 <div class="container">
    <aside>侧边栏</aside>
    <div class="box">
      <header>头部</header>
      <article>主体区域</article>
      <footer>底部</footer>
    </div>
  </div>

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

aside {
  background-color: aqua;
  width: 80px;
}

.box {
  display: flex;
  flex: auto;
  flex-direction: column;
}

header {
  background-color: #666;
  height: 80px;
}

article {
  background-color: #ff3040;
  flex: auto;
}

footer {
  background-color: #666;
  height: 150px;
}