1.關(guān)于display:inline-block
平時用inline-block布局時常會遇到一個問題惶桐，就是兩個共處一行的元素因為某些原因要加寬度而轉(zhuǎn)成了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;就可以解決這個問題奈梳。關(guān)于vertical-align: sub;后續(xù)解釋肮之。
2.關(guān)于一行四列的布局
父級：display: flex; flex-wrap: wrap;
子級：width: 25%;or flex: 0 0 25%;
具體案例見上述代碼
3.關(guān)于省略號
布局時常碰到一個問題就是一行放不下崩掘，又不想換行檀葛，想放不下的文字以省略號代替。此時靡馁，有幾個條件是必須的：
①有固定寬度（只有inline-block和block可以設(shè)置寬度）
②不折行white-space:nowrap;
③超出部分隱藏overflow:hidden;
④以省略號代替text-overflow:ellipsis;
4.關(guān)于多行文字居中顯示
如下圖所示：
此時又該如何布局呢欲鹏？
以下為代碼示例：
<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>
關(guān)鍵之處在于display: flex;然后將之設(shè)置為折行flex-wrap: wrap;再設(shè)置高度以及align-items: center;這樣就實現(xiàn)了多行文字居中顯示
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>
關(guān)于flex布局阮一峰有一篇文章寫得很不錯http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
