《11 things I learned reading the flexbox spec》简摘

对原文进行简单的翻译、摘入，有兴趣的部分可以到原文中进行查阅。

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，让字根据基线对齐。

《11 things I learned reading the flexbox spec》简摘