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
