css: flex的实际应用场景

tabbar组件

前言

• 没有flex布局之前，甚至已经有了flex之后，很多前端程序员提到tabbar，还是会选择position:fixed的解决方法（当然也包括之前的我）。观看这篇文章的你大可以到google搜索一下看看，position: fixed 的方法，在移动端是个多大的天坑！
• 何不使用flex布局呢？坑少又装x

代码实现

//html
<div class="container">
  <div class="content">我是内容</div>
  <div class="tabbar">我是tabbar</div>
</div>
..
//css
*{marin:0; padding:0}
.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content{    
  flex-grow: 1;
  overflow: auto;
}
.tabbar{
  box-sizing: border-box;
  border: 1px solid red;
}

Jsbin 点击预览

弹性布局

pc端的flex布局

• 用法和tabbar大同小异。固定栏的宽度写死，弹性栏撑满屏幕
• 点击预览

垂直居中

前言

• 实现居中的方法有很多种。
• 单行垂直居中可以使用height=line-height的技巧。但多行就要用到flex布局了。

代码实现

//html
  <div class="container">
     <section class="item"></section>
  </div>
//css
    .container {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center;     /* 垂直居中 */
        width: 100px;
        height: 60px;
        border: 1px solid red;
    }
    .item {
        width: 30px;
        height: 20px;
        background-color: red;
    }

• 点击预览