Flex Box 案例实践

前言

基于前一篇文章关于 Flex 语法知识的梳理，这篇文章整理出一些常见的 Flex 布局解决方案。实现方式仁者见仁，欢迎大家评论区指正交流。

文中的案例主要包含以下几个方面：

• 元素垂直居中布局
• 两栏布局
• 三栏布局

现代浏览器都支持 Flex Box 语法，可以放心使用：

正文

在开始之前，还是把这张图贴上，着重理解 Flex Box 里主轴( main axis )和交叉轴( cross axis )的概念。

1.垂直居中

在 Flex 布局方案出现之前，前端领域要实现元素的垂直居中一直都不是件容易的事。彼时，前端领域也涌现了一大批实现垂直居中的解决方案，这里简单回顾一下历史：

• 水平居中

  text-align:center;
  margin:0 auto;
  

• 垂直居中
  • 行内元素(分为单行和多行的情况)

  单行文本可以直接在其父盒子上设置 height 和 line-height 两个值相同即可；多行文本可能就需要配合使用 table 和 table-cell 的方式，或者添加伪元素占位填充的方式实现。

  • 块级元素(分为固定宽高和宽高不定的情况)

  可以借助绝对定位。固定宽高的情况设置 top:50%; margin-top:-width/2 ;宽高不定的设置 top:50%;transform: translateY(-50%);

但这些方案现在都可以抛开，直接使用 Flex Box 即可。

借助 Flex 语法，实现元素的水平垂直居中，在 Flex Box 内即让元素在主轴( main axis )和交叉轴( cross axis )上分别居中。语法梳理里整理过， justify-content 定义了元素在主轴方向上的排列方式， align-item 定义了元素在交叉轴上的排列方式，所以一个可行的解决方案即为：

.parent{
    display:flex;
    justify-content:center;
    align-items:center;
}
复制代码

属性，定义其在容器内部交叉轴上的排列方式。所以，另一个可行的解决方案可为：

.parent{
    display:flex;
    justify-content:center;
}
.child{align-self:center;}
复制代码

得到的效果和上面是一样的，具体可参见：flex-center

2.两栏布局

两栏布局常见于一些博客或信息类网站，分为 固定宽+自适应 和 不定宽+自适应 两种模式。这里给出一个基本布局结构：

<div class="box">
  <main>正文内容容</main>
  <aside>侧边栏内容</aside>
</div>
复制代码

• 固定宽+自适应：侧边栏固定宽度 200px ，主内容区域自适应；主内容区域结构靠前是为了优先加载显示，侧边区域可通过设置 order 调整。

.box{display:flex}
.box aside{width:200px; order:-1;}      //设置 order 让侧边栏前置显示
.box main{flex-grow:1}                  //设置 flex-grow:1 会使该板块填充容器空白空间
复制代码

上述代码之所以设置 flex-grow:1 能达到填充容器剩余空间的原因： 侧边栏(aside)默认的 flex-grow：0 表明不放大，同时主内容区域设置为 1 意味着该元素放大填充整个空白区域 。具体效果如图示，侧边栏内容再多也只是在元素块内换行显示：

• 不定宽+自适应：理解为两栏均为自适应宽度。可以做一个假设，主内容区域宽度是侧边栏两倍，一个可行的方案是：

.box{display:flex}
.box aside{flex:1; order:-1;}      //等价于 flex:1 1 0;
.box main{flex:2;}          //等价于 flex:2 2 0;             
复制代码

语法篇关于 flex 属性有提及它是 flex-grow , flex-shrink 和 flex-basis 三个属性的合并写法。默认值是： 0 1 auto 。即元素默认不放大，在容器空间不足时会缩小，内容换行显示。

上述代码即为把容器空白区域等分成三份，侧边栏占据一份，主内容区域占据两份。 视觉效果和上图类似。

3.三栏布局

三栏布局主要是指主体区域内容划分为三块，左右两边固定宽度，中间内容宽度自适应布局。

其实在业界有两个热门的解决方案：“圣杯布局”和“双飞翼布局”。之所以有不同的叫法只是实现方式不同：

<!--圣杯布局结构-->
<div class="content">
  <div class="center"></div>
  <div class="left"></div>
  <div class="right"></div>	
</div>
<!--双飞翼布局结构-->
<div class="content">
  <div class="center">
    <div class="middle"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>	
</div>
复制代码

圣杯布局原理：父盒子设置两个侧边栏宽度需要的 padding 值， center 盒子设置 100% 于父盒子的宽且子盒子均脱离文档左浮动；特别要注意的是因为父盒子设置了 padding 值，子盒子需要设置 relaive 相对于文档然后用负边距进行定位。

双飞翼布局原理： center 盒子内部的 middle 元素设置供给左右两边侧边栏宽度的 margin 值， center 盒子设置 100% 于父盒子的宽且子盒子均脱离文档左浮动；然后侧边盒子通过负边距抵消 middle 盒子内预设的 margin 值进行定位。

具体实现代码网络上有很多资源，这里就不展开了。

回归到 Flex Box ，发现事情变得简单很多。我们针对圣杯结构进行布局（因为双飞翼布局需要额外添加一个元素），一个可行的解决方案如下：

<!--左右侧边栏均自适应宽度-->
.content{display:flex; height:200px;}
.content .left{order:-1; background:#3498db;flex-grow:1;}
.content .right{background:#34495e;flex-grow:1;}
.content .center{flex-grow:2;background:#e74c3c}

<!--左右侧边栏固定宽度-->
.content{display:flex; height:200px;}
.content .left{order:-1; background:#3498db;width:200px;}
.content .right{background:#34495e;width:200px;}
.content .center{flex-grow:1;background:#e74c3c}
复制代码

配合添加 header 和 footer ，而且往往中间 content 内容需要自适应高度。基于圣杯布局结构，可以在外部父盒子设置 flex-direction 做整体垂直方向布局。 HTML 结构和样式代码可以是：

<div class="container">
  <div class="header">This is head</div>
  <div class="content">
      <div class="center">center</div>
      <div class="left">left</div>
      <div class="right">right</div>
  </div>
  <div class="footer">This is foot</div>
</div>
复制代码

.container{display:flex; flex-direction:column;min-height:100vh;} //设置容器相对视窗 100% 高度
.header,.footer{flex:1;}
.header{background:#1abc9c;}
.content{flex:1;display:flex;}
.left{order:-1; background:#3498db;flex: 0 0 12em;}
.right{background:#34495e;flex: 0 0 10em;}
.center{background:#e74c3c;flex:1;}
.footer{background:#f1c40f;}
复制代码

如果要在移动设备上显示效果良好，主体区域内容要改变元素排列方式，可能需要添加 media query 做适配。

@media (max-width: 768px) {
  .content {
    flex-direction: column;
    flex: 1;
  }
  .left,
  .right,.center{
    flex: auto;
  }
}
复制代码