视口标签与flex布局

视口标签的作用

实现网页的宽度跟设备的宽度是一样的。规定html网页大小用的。

没有视口标签，网页的宽度是980px。

搜索某些奇数支持的浏览器版本

caniuse.com

flex布局

    display: flex;

​	flex-wrap: wrap;换行

​	flex-direction: column;垂直排列（以副轴方向垂直排列）

​	 /* 水平对齐 */

	 align-items: center;

	 /* 垂直对齐 */

	 justify-content: center;

flex布局单行显示省略号

.box2{

​      flex: 1;

​      width: 0;//配合使用单行显示，显示省略号
    
    	//当然也可以直接给width值，就不用flex：1.

​    }

.box2 h5{

​      text-overflow: *ellipsis*;

​      white-space: *nowrap*;

​      overflow: *hidden*;//三行代码在非弹性布局中显示省略号

​    }