Flex Box 案例实践

SamChord
2,602 阅读6分钟

前言

基于前一篇文章关于 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;
}

https://codepen.io/xutaogit/pen/jQwGKJ
上述解决方案是在父容器里针对子元素做了配置，如果使用子元素本身，有一个 align-self 属性会覆盖容器的align-items属性，定义其在容器内部交叉轴上的排列方式。所以，另一个可行的解决方案可为：

.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;
  }
}

https://codepen.io/xutaogit/pen/jQwGKJ

4.更多参考

以上。

文中案例参考链接

avatar
文章
阅读
粉丝