flexbox

1. 

flex-shrink: 0; 

flexbox 默认会收缩没有内容的元素的高度，设置为0表示不收缩

2. 

flex-grow: 1;   

flexbox 元素默认 flex-grow = 0, 数值越大表示占据页面空余位置的优先级越高

3.

height: 100vh; // viewport height，100%的意思

4.

flex-direction: column;  // 类似于layout 属性，页面布局方式，默认是水平排列

5.

align-items: center  //添加到父元素上，此元素中的元素按剧种排列

6. 

justify-content: space-between;  //自适应优化元素之间的距离

7. 

box-sizing: content-box|border-box|inherit;

content-box: 在宽度和高度之外绘制元素的内边距和边框

border-box: 内边距和边框都将在已设定的宽度和高度内进行绘制