參考: 本文參考 W3C 的 CSS 伸縮盒布局模組
在 伸縮盒 上的css設置
以下這些屬性，是必須在**盒上設置的樣式
align-items的默認值是stretch, 并不是center冰更，所以要盒內(nèi)元素豎直居中要設置為center.
justify-content的默認值是flex-start，也就是左對齊胞四，若要盒內(nèi)元素居中要設置為center.
flex-direction屬性決定主軸的方向（即項目的排列方向），一般默認為row伶椿，也就是從左往右排列.
<style>
div {
display: flex;
justify-content: space-between; //設置本伸縮盒內(nèi)的元素在水平方向是怎么伸展
align-items: center;// 設置本伸縮盒內(nèi)的元素在豎直方向是怎么樣（上對齊/下對齊/baseline對齊）
}
</style>
在 每個項目 上的css設置
如果伸縮盒只設置了justify-content的值為space-between辜伟，而盒的內(nèi)部項目有3個氓侧，那么，這三個項目會平鋪导狡，在盒子的頂部约巷，從左到右平鋪——因為盒子如果不設置align-items，那么默認為stretch旱捧，也就是所有內(nèi)部項目在盒子頂部独郎。當我們對每個項目在豎直方向都有不同的要求時候，要對單獨的項目(也就是盒子內(nèi)的item)設置align-self, 一般設為flex-start,flex-end,center枚赡。
