對原文進行簡單的翻譯、摘入，有興趣的部分可以到原文中進行查閱损趋。
1.margin在flex中有特殊用法
將一個Sign in按鈕靠右。下面兩個CSS實現(xiàn)的效果是相同的椅寺。但使用margin-left:auto則顯得更為了輕巧浑槽。
1.png
.header {
display: flex;
}
.header .logo {
/* nothing needed! */
}
.header .title {
flex: 1;
}
.header .sign-in {
/* nothing needed! */
}
2.png
.header {
display: flex;
}
.header .logo {
/* nothing needed! */
}
.header .sign-in {
margin-left: auto;
}
2.min-width的問題
3.png
.book {
display: flex;
}
.book .description {
font-size: 30px;
}
.book .buy {
margin-left: auto;
width: 80px;
text-align: center;
align-self: center;
}
使用CSS完成圖中的布局時，一切都顯得很完美返帕，但是當內(nèi)部文字更長時桐玻，就會出現(xiàn)很糟糕的一幕。
4.png
這是因為荆萤，min-width默認值為auto镊靴，此時將與長單詞的長度相同铣卡。就導(dǎo)致了如上問題。要解決這個問題偏竟，只要設(shè)置min-width: 0煮落，也就是告訴flexbox允許該元素寬度比其內(nèi)容窄。
在實際中處理flex元素中文本問題時踊谋，我建議采取如下的方法將文字包括起來蝉仇。
.book {
display: flex;
}
.book .description {
font-size: 30px;
min-width: 0;
word-wrap: break-word;
}
.book .buy {
margin-left: auto;
width: 80px;
text-align: center;
align-self: center;
}
結(jié)果如下：
5.png
3.flexbox作者的獨門秘籍
我們都知道flex是flex-grow，flex-shrink和flex-basis的集合殖蚕。但在實際使用中量淌，我們往往要試上幾次才能達到預(yù)期效果。
在此嫌褪，將終結(jié)這個問題：
-
flex: 0 1 auto或flex：initial因為空間不足呀枢，需要擠壓一個元素，同時不讓該元素進行伸縮 -
flex: 1 1 auto或flex:auto既需要元素伸縮填補有效空間笼痛，同時又需要 -
flex: 0 0 auto或flex:none不想讓元素flex
4.inline-flex
恩裙秋，就是有這么一個屬性，他創(chuàng)造的flex容器是個行內(nèi)元素缨伊。
5.vertical-align
flex中摘刑，vertical-align和float一樣，不生效刻坊！
6.不要使用百分比的margin和padding
沒有為什么枷恕，用就是了。規(guī)范說的谭胚。
7.flex中外邊距不合并徐块。
8.flex布局中，z-index works even if position: static
9.Flex-basis細微但重要
flex-basis是為元素設(shè)置自由空間未分配前的初始長度灾而。
在這里有個小技巧胡控，設(shè)置flex-basis:0，這樣就可以把容器的所有空間都拿來分配了旁趟。
6.png
10. align-items: baseline
垂直校準時昼激，往往使用align-items: center。但是如果字體大小不同的話锡搜，我們就需要用到align-items: baseline橙困，讓字根據(jù)基線對齊。
