對原文進行簡單的翻譯、摘入，有興趣的部分可以到原文中進行查閱。
1.margin在flex中有特殊用法
將一個Sign in按鈕靠右。下面兩個CSS實現的效果是相同的。但使用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完成圖中的布局時，一切都顯得很完美，但是當內部文字更長時，就會出現很糟糕的一幕。
4.png
這是因為，min-width默認值為auto，此時將與長單詞的長度相同。就導致了如上問題。要解決這個問題，只要設置min-width: 0，也就是告訴flexbox允許該元素寬度比其內容窄。
在實際中處理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;
}
結果如下：
5.png
3.flexbox作者的獨門秘籍
我們都知道flex是flex-grow，flex-shrink和flex-basis的集合。但在實際使用中，我們往往要試上幾次才能達到預期效果。
在此，將終結這個問題：
-
flex: 0 1 auto或flex：initial因為空間不足，需要擠壓一個元素，同時不讓該元素進行伸縮 -
flex: 1 1 auto或flex:auto既需要元素伸縮填補有效空間，同時又需要 -
flex: 0 0 auto或flex:none不想讓元素flex
4.inline-flex
恩，就是有這么一個屬性，他創造的flex容器是個行內元素。
5.vertical-align
flex中，vertical-align和float一樣，不生效！
6.不要使用百分比的margin和padding
沒有為什么，用就是了。規范說的。
7.flex中外邊距不合并。
8.flex布局中，z-index works even if position: static
9.Flex-basis細微但重要
flex-basis是為元素設置自由空間未分配前的初始長度。
在這里有個小技巧，設置flex-basis:0，這樣就可以把容器的所有空間都拿來分配了。
6.png
10. align-items: baseline
垂直校準時，往往使用align-items: center。但是如果字體大小不同的話，我們就需要用到align-items: baseline，讓字根據基線對齊。
