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
