css

弹性布局

display:flex

父元素使用

flex:1

子元素使用，默认不换行。包括flex-basis,flex-grow,flex-shrink三个属性

1. flex-basis:设置子元素的占用空间；等级高于width
2. flex-grow:按比例瓜分父元素剩余空间，使子元素在水平方向上布满父元素
3. flex-shrink:按比例缩小子元素的宽度，使其刚好被父元素容纳

align-items:center

垂直方向上的居中

justify-content:center

水平方向上的居中