布局小问题

1.关于display:inline-block
平时用inline-block布局时常会遇到一个问题，就是两个共处一行的元素因为某些原因要加宽度而转成了inline-block之后两个元素不再对其了，如下：

<style>/*此处只是样式示意，是less写的*/
.teacherList{
    display: flex;
    flex-wrap: wrap;
    .tName{
        width: 25%;
        // flex: 0 0 25%;
        margin-bottom: 20px;
        cursor: pointer;
        color: #111;
        .circle{
            display: inline-block;
            width: 34px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            border-radius: 50%;
            border: 1px solid #EAEAEA;
            margin-right: 10px;
            font-size: 14px;
        }
        .name{
            display: inline-block;
            width: 70px;
            white-space:nowrap; 
            overflow:hidden; 
            text-overflow:ellipsis;
            vertical-align: sub;
        }
    }
    .tName:hover,.tName.active{
        color: #0084FF;
        .circle{
            color: #fff;
            background-color: #508EFB;
            border: 1px solid #508EFB;
        }
    }
}
</style>
<div className="teacherList">
  <div className="tName">
    <span className="circle">布</span>
    <span className="name">布局</span>
  </div>
  <div className="tName">
    <span className="circle">布</span>
    <span className="name">布局</span>
  </div>
  <div className="tName">
    <span className="circle">布</span>
    <span className="name">布局</span>
  </div>
  <div className="tName">
    <span className="circle">布</span>
    <span className="name">布局</span>
  </div>
</div>

此时只要加一个vertical-align: sub;就可以解决这个问题。关于vertical-align: sub;后续解释。

2.关于一行四列的布局
父级：display: flex; flex-wrap: wrap;
子级：width: 25%;or flex: 0 0 25%;
具体案例见上述代码

3.关于省略号
布局时常碰到一个问题就是一行放不下，又不想换行，想放不下的文字以省略号代替。此时，有几个条件是必须的：
①有固定宽度（只有inline-block和block可以设置宽度）
②不折行white-space:nowrap;
③超出部分隐藏overflow:hidden;
④以省略号代替text-overflow:ellipsis;

4.关于多行文字居中显示
如下图所示：

111.png

此时又该如何布局呢？
以下为代码示例：

<style>
 .teachers{
    margin-left:12px;
    width: 180px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 32px;
    >span{
        margin-right: 5px;
        display: inline-block;
    }
}
</style>
<div className="teachers">
    <span>马媛媛</span>
    <span>马媛媛</span> 
    <span>马媛媛</span>
     <span>马媛媛</span>       
</div>

关键之处在于display: flex;然后将之设置为折行flex-wrap: wrap;再设置高度以及align-items: center;这样就实现了多行文字居中显示

5.一行多个元素，前面几个左靠齐，最后一个右边靠齐

<style>
.wrap{
    display:flex;
}

.wrap .last{
   display: flex;
   justify-content: flex-end;
   flex: 1;
}
</style>

<div class="wrap">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div class="last"><div>0</div></div>
</div>

关于flex布局阮一峰有一篇文章写得很不错http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool