【CSS3】flex布局实践篇 | 7种常见网页布局方案

1、垂直居中

垂直居中一度是前端面试时必问知识点。 目前的垂直解决方案 使用了 从负外边距 到 display:table-cell 等荒谬的奇技淫巧，包括全高的伪元素。这些方法是又复杂又难写。

不知道大家第一次使用flex布局做什么，反正我是用来做垂直居中，使用它实在是太简单了，两行代码搞定。

<div class="main">
    <h2>我居中啦！</h2>
    <p>这个元素水平垂直居中了。</p>
</div>

2、sticky footer布局

业务场景：

当页面内容少时，让页脚粘在底部；当内容超过一屏时，页脚跟在后面。

这一度也是一个CSS布局难题。但flex布局可以完美解决这个问题。

<div class="container">
  <header>header</header>
  <main>
    <div class="content">
      今夜我不会遇见你 </br>
      今夜我遇见了世上的一切</br>
      但不会遇见你。
    </div>
  </main>
  <footer>footer</footer>
</div>



.container {
    display: flex;
    flex-derection: column;
}

header, footer{
    height: 100px;
}

头部和尾部定高，中间内容设置高度后，当内容少时，页脚会在上面，不会固定在底部。

这种效果显然不是我们期望的，要想实现业务要求，就需要使用到flex-grow属性，它的默认值是0。即当有空余空间时，也不放大。这时我们需要将中间main设置flex-grow为1，这样当有空余空间，他就会放大，填充剩余空间。

main { flex-grow: 1; }

内容少时-吸附在底部：

内容多时-跟随滚动：

这样我们就实现了这个经典布局了。

3、圣杯布局

这是一个经典的 CSS 布局挑战，历史上出现的方案都没有完美解决。直到 Flexbox 布局的出现，终于成为可能。

圣杯布局由页头 (header)，中间部分 (center)，页脚 (footer)，和三栏组成。中间的一栏是主要内容，左边和右边提供如广告、导航的链接。

<div class="HolyGrail">
  <header>header</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">content</main>
    <nav class="HolyGrail-nav">nav</nav>
    <aside class="HolyGrail-ads">ads</aside>
  </div>
  <footer>footer</footer>
</div>


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

header,footer {
  height: 100px;
}

.HolyGrail-body {
  flex: 1;

  display: flex;
  justify-content: space-between;
}

.HolyGrail-nav, .HolyGrail-ads {
  flex: 0 0 100px;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav {
  /* 导航放置最左边 */
  order: -1;
}

小屏幕时，中间内容自动成垂直布局，三列。

/* 响应式 */
@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
  }

  .HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content {
    flex: 1;
  }
}

4、经典导航栏布局

<header>
  <div class="header-left">
    <div class="logo"></div>
    <nav>
      <a>首页</a>
      <a>档案</a>
    </nav>
  </div>

  <div class="header-right">
    <div class="user">echo</div>
    <div class="logout">退出</div>
  </div>
</header>



header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left,.header-right {
  display: flex;
  align-items: center;
}

.logo {
  flex: 0 0 32px;
}

.user {
  margin-right: 20px;
}

5、栅格布局

基础栅格布局

最简单的网格布局就是平均分布。在容器中平均分配空间，需要设置项目的自动缩放。

<div class="grid">
  <div class="cell"></div>
  ...
</div>


.grid {
  display: flex;
}

.cell {
  flex: 1;
}

独立尺寸布局

当你的需求不是等宽栅格的时候，可以添加尺寸属性到特定的栅格中。没有尺寸属性的栅格将简单地继续平分剩下的可用空间。

下边加了 "auto" 标签的栅格没有指定任何尺寸属性。

<div class="grid">
  <div class="cell u-1of2"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>


.u-1of2 {
  flex: 0 0 50%;
}

.u-1of3 {
  flex: 0 0 33.33%;
}

.u-1of4 {
  flex: 0 0 25%;
}

6、悬挂式布局

这种布局很普遍，当我们在做一个新闻列表模块时，通常它每一栏的的左侧或右侧，需要展示一个图片栏。

<div class="list">
  <div class="item">
    <div class="img"></div>
    <div class="info"></div>
  </div>
  <div class="item">
    <div class="img"></div>
    <div class="info"></div>
  </div>
</div>


.list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item {
  display: flex;
  gap: 10px;
}

.item:nth-of-type(2n) {
  flex-direction: row-reverse;
}

.img {
  width: 32px;
  height: 32px;
}

.info {
  flex: 1;
}

7、输入框附加布局

我们常常需要在输入框的前方添加提示，后方添加按钮。

<!-- 后置 -->
<div class="InputAddOn next">
    <input class="InputAddOn-field" />
    <span class="InputAddOn-item">搜索</span>
</div>


.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
}

.InputAddOn-item {
  flex: 0 0 60px;
}

结语

以上介绍的7种布局基本覆盖了大部分业务场景下的页面布局。或有不足之处，欢迎大家补充讨论。