对原文进行简单的翻译、摘入，有兴趣的部分可以到原文中进行查阅。
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，让字根据基线对齐。
