image.png
在Using CSS Flexible Boxes的Flex Item Considerations部分，有这样一段话，表达的意思主要有两个：
- flex item的外边距不会合并
- 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
网友评论