Flex Box 案例实践

时间  2019-12-04 标签 flex box 案例 实践

前言

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

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

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

现代浏览器都支持 Flex Box 语法，能够放心使用：前端

正文

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

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%);ide

但这些方案如今均可以抛开，直接使用 Flex Box 便可。布局

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

.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.更多参考

以上。

文中案例参考连接

联系我们 沪ICP备13005482号-10