如上，class为“box”的div里面放的就是“原本的页面整体”部分。为了达到想要的效果，我们采用了flex布局！

flex简写时包括三个属性：flex-grow、flex-shrink和flex-basis ——

• flex-grow：指定了容器剩余空间多余时候的分配规则，默认值是0，多余空间不分配；

• flex-shrink：指定了容器剩余空间不足时候的分配规则，默认值是1，空间不足要分配；

• flex-basis：flex-basis则是指定了固定的分配数量，默认值是auto。

设置的同时需设置width或者height属性；

/* 列表仅水平滚动 */
.page_list { width: 100vw; display: flex; overflow-y: hidden; }
/* 主内容宽度100%，白色背景覆盖 */
.box { flex: 0 0 100vw; height: 100%; background-color: #fff; position: relative; overflow-y: auto;overflow-x: hidden;transition: all .6s ease; }
/** 遮罩层样式 */
.zb_mask{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	background-color: rgba(0,0,0,.2);
	pointer-events: none;
	opacity: 0;
	transition: all .6s ease;
}
/* 空标签元素，作用是腾出水平滚动空间 */
.space { flex: 0 0 12rem; }
/* 按钮固定定位，藏在内容白色背景后面 */
.z_two_page { width: 12rem; position: fixed; right: 0; top: 0; }

大概就是：什么也不干的情况下只展示box的内容（也就是和不加这些花里胡哨的div一样的效果），它是用background覆盖后面的class为“space”的占位元素；在”哈哈哈“展示的时候，box右移。

这里需要注意的是：为什么“哈哈哈”所属div在前而“页面”所属div在后？
因为根据前面所说，这里采用的是position覆盖，它的规则就是“后面的覆盖前面的”，所以如果采用这种布局方式，那么一开始被隐藏的元素就要放在前面。

代码中flex的前两个属性值为0，表示在空间增大或缩小时依然保持原状（这是本文的基础！），第三个元素则写了展示时的“默认大小”：如你所看，box承载的是页面，所以它是100vw，而class为“z_two_page”的元素这里设置了12rem ，你完全可以将这个值换掉！

那如何将“哈哈哈”展示在视野中？ —— js控制“代表页面的元素”整体移动即可。

这里有个“遮罩层效果”，按照传统的js实现肯定就要去找display了，再进一步可以用上面所说的“display动画效果”增强体验。
但是本文上面css代码中加了 pointer-events 属性：元素是否穿透；设置为none时就可以不用在意对应元素是否存在了（从事件上看此时有和没有一样了），也就不用控制display什么的，大大增强性能了有木有！

let right=document.querySelector(".right");
let box=document.querySelector(".box");
let mask=document.querySelector(".zb_mask");
right.onclick=function(){
 box.style.marginLeft="-12rem";
 mask.style.cssText+="opacity: 1;pointer-events: all;"
}
mask.onclick=function(){
 box.style.marginLeft="0";
 mask.style.cssText+="opacity: 0;pointer-events: none;"
}

最后，考虑到移动端页面展示的一些问题，比如：右侧留白问题、原生手势对页面整体的影响等，我们一般会在css中设置 html{max-width: 100vw;overflow-x: hidden;} 。如果你想要用户在移动端依然只能够通过点击弹出侧边栏，在这里我们可以在css中加上限制 —— 设置上方功能只有在PC端生效：

@media (any-hover: none) {
	.page_list{
		overflow-x: hidden;
	}
}