flex布局怎么实现宽度自适应？

1、UI界面

• 页面分为两个部分，左右两格，当页面进行伸缩时，其宽度随着页面宽度自适应。
  
• 左右两格排列

给父元素div进行设置
	display: flex;
	flex-flow: row wrap; // 以行排列 并且允许换行
	align-content: flex-start;

• flex-flow 设置轴向与换行组合

是 flex-direction 和 flex-wrap 的简写。
所以只要掌握，flex-direction 和 flex-wrap即可。

• 两个盒子的宽度随着页面宽度自适应。
• 为了实现这一功能，这里就要引入CSS3的calc()属性。
• calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
• 代码如下 给子元素设置

// 给奇数元素设置了右边距的情况下
test:nth-child(odd) {
	margin-right: 20px;
}
test: {
	width: calc(50% - 10px);
}

• 对于下面这个布局，主要是实现三角形，并且给三角形加边框颜色。
  
• 三角形
• 三条边框透明，一条边框有颜色。
• 向左的三角形

	border-right: 26px solid #FFFFFF;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 8px solid transparent;

另一种写法

• 向上的三角形

	border-width: 0 5px 8px;
	border-style: solid;
	/* 四个颜色值 上右下左 */
	/*  三个颜色值 上透明 左右透明 下颜色 */
	border-color: transparent transparent #ffffff;

• 给三角形边框设置颜色、设置阴影。
• 做法其实就是设置两个三角形出来，位置不一样，即可实现边框、阴影的效果
• 使用到伪类元素：：before :after
• 知道了原理其实代码也就很简单
• 边框颜色就是给两个三角形设置不同的颜色边框，阴影同样，给两个三角形设置不同的颜色即可。

test:before {
	...
}

test:after {
...
}

标题

1、对于以上提示框的好的，我知道了,这一功能的实现。
2、解决方案是使用LocalStorage进行本地存储

• 关闭提示的时候进行存储

		dom.find(".tip span").on("click ", function () {
			dom.find(".tip").addClass("none");
			window.localStorage.setItem("prompt", true);
		})

• 在页面初始化的时候进行判断

		// 控制提示是否显示
		if (!window.localStorage.getItem("prompt")) {
			dom.find(".tip").removeClass("none");
		} else {
			dom.find(".tip").addClass("none");
		}