CSS多列布局的实现

CSS多列布局的实现

实际上我们在讨论布局的时候，会把网页上特定的区域进行分列操作。按照分列数目，可以大致分为 3 类，即单列布局、2 列布局、3 列布局等。

单列布局

单列布局是最常用的一种布局，它的实现效果就是将一个元素作为布局容器，通常设置一个较小的（最大）宽度来保证不同像素宽度屏幕下显示一致。

示例网站

拉勾，蓝色区域为布局容器，水平居中对齐，宽度 1260px：

谷歌搜索，蓝色区域为布局容器，水平左对齐，宽度 652px：

一些网站会将单列布局与其他布局方式混合使用，比如拉勾网首页的海报和左侧标签就使用了 2 列布局，这样既能向下兼容窄屏幕，又能按照主次关系显示页面内容。

这种布局的优势在于基本上可以适配超过布局容器宽度的各种显示屏幕，比如上面的示例网站布局容器宽度为 700px，也就是说超过 700px宽度的显示屏幕上浏览网站看到的效果是一致的。

但它最大的缺点也是源于此，过度的冗余设计必然会带来浪费。例如，在上面的例子中，其实我的屏幕宽度是足够的，可以显示更多的内容，但是页面两侧却出现了大量空白区域，如果在4k 甚至更宽的屏幕下，空白区域大小会超过页面内容区域大小！

单列布局的实现

单列布局没有太多技术难点，通过将设置布局容器（最大）宽度以及**左右边距为auto**即可实现

两列布局

两列布局使用频率也非常的高，实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满。为了描述方便，我们暂且称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器。

示例网站

Ant Design 文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器：

这种布局适用于内容上具有明显主次关系的网页，比如 API 文档页面中左侧显示内容导航，右侧显示文档描述；又比如后台管理系统中左侧显示菜单栏，右侧显示配置页面。相对于单列布局，在屏幕宽度适配方面处理得更好。当屏幕宽度不够时，主要内容布局容器优先显示，次要内容布局容器改为垂直方向显示或隐藏，但有时候也会和单列布局搭配使用，作为单列布局中的子布局使用。（响应式布局）

两列布局的实现

使用 flex 布局实现两列布局：

第 1 步，写好 HTML 结构。这里为了查看方便，我们为布局容器设置背景颜色和高度。

<style>
  /* 为了方便查看，给布局容器设置高度和颜色 */
  main,aside {
    
    height: 100px;
  }
  main {
    
    background-color: #f09e5a;
  }
  aside {
    
    background-color: #c295cf;
  }
</style>
<div>
  <main>主要布局容器</main>
  <aside>次要布局容器</aside>
</div>

第 2 步，将布局容器水平排列：

<style>
  .wrap {
    
    display: flex;
    flex-direction: row-reverse;
  }
  .main {
    
    flex: 1;
  }
  .aside {
    
    flex: 1;
  }
</style>
<div class="wrap">
  <main class="main">主要布局容器</main>
  <aside class="aside">次要布局容器</aside>
</div>

第 3 步，调整布局容器宽度：

<style>
  .wrap {
    
    display: flex;