flex item with margin auto

image.png

在Using CSS Flexible Boxes的Flex Item Considerations部分，有这样一段话，表达的意思主要有两个：

1. flex item的外边距不会合并
2. flex item使用margin: auto;可以吸收多余的空间

利用第二点，在flex item就可以实现justify-content: center;或者水平垂直居中的效果

<div>
  <span>123</span>
</div>

div {
  width: 100px;
  height: 100px;
  background-color: red;
  display: flex;
}
span {
  margin: auto;
}

最后效果

image.png

其实就相当于在div上使用

div {
  //...
  justify-content: center;
  align-items: center;
}

除了可以用来居中，还可以用来分配多个flex item剩余的空间

<div>
  <span>123</span>
  <span>456</span>
</div>

css代码一样，那么最终的效果就是

image.png