移动端导航左右固定、中间自适应的实现

<style>
/* 头部导航条 */
.tt-header{
+   display: flex;
    position: fixed;
    box-sizing: border-box;
    width: 100%;
    max-width: 640px;
    height: 2.3rem;
+   line-height: 2.3rem;
+   text-align: center;
    top: 0;
    z-index: 200;
    border-bottom: 1px solid #ddd;
+   background: #f8f8f8;
}
/* 左侧功能区 */
.tt-header > .left{
    flex-basis: 3rem;
    text-align: center;
    flex-shrink: 0;
}
/* 中间标题部分 */
.tt-header > .title{
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 右侧功能区 */
.tt-header > .right{
    flex-basis: 3rem;
    flex-shrink: 0;
}
</style>
<div class="tt-header">
    <div class="left"><i class="fa fa-chevron-left"></i> 返回</div>
    <div class="title">我是标题</div>
    <div class="right"><i class="fa fa-ellipsis-h"></i></div>
</div>

两个其他的点要注意：

“line-height: 2.3rem;” 配合上之前的 “height: 2.3rem;” 就可以使单行文本水平居中，通过在父元素上设置，三个子元素都可以继承的到。
.tt-header 使用的怪异盒模型，但在做垂直居中的时候 height 和 line-height 使用的是同样的竖值，把 border-bottom 的宽度忽略也没问题。
“overflow: hidden; white-space: nowrap; text-overflow: ellipsis;” 这三条语句组合使用，就可以对单行超长文本做截断，并且在截断的地方自动补充省略号。
当标题文本超长时，就会自动截断：