利用flex布局使页面自适应屏幕大小

• 水平布局（默认）

最外层有个唯一的父盒子容器

给父盒子样式加display:flex

给子盒子样式加flex:1

也可以给子盒子样式的flex设置为2或其他数，这样该子盒子就占了两份宽度

• 垂直布局

父盒子样式{

display:flex;

flex-direction:column; // 垂直布局

height:100vh; // 页面适应屏幕高度

}

子盒子样式同上