How does flex layout achieve width adaptation?

1. UI interface

The page is divided into two parts, left and right two grids, when the page is stretched, its width adapts to the page width.
Two grids left and right

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

flex-flow sets the combination of axis and line feed

It is shorthand for flex-direction and flex-wrap.
So just master, flex-direction and flex-wrap.

The width of the two boxes adapts to the width of the page.
In order to achieve this function, CSS3 calc()properties are introduced here .
calcIt is an abbreviation of the English word calculate (calculation), a new function of css3, you can use calc()给元素的border、margin、pading、font-size和widthother attributes to set dynamic values.
This function allows us to calculate CSS values instead of specifying exact values. Usually used to calculate the size or position of an element. It supports addition, subtraction, multiplication and division.

It is important to pay special attention to it +和-运算符必须用空格隔开, otherwise it will not work properly. The * and / operators do not have this restriction, but for consistency reasons, it is recommended to add spaces.

Also, it’s great that we can 以混合CSS单位, for example, we can subtract percentages and pixels.

The code is as follows to set the child elements

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

For the following layout, the main purpose is to implement triangles and add border colors to the triangles.
triangle
Three borders are transparent, and one border is colored.
Left triangle

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

Another way of writing

Upward triangle

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

Set the color and shadow of the triangle border.
The method is actually to set two triangles out of different positions to achieve the effects of borders and shadows.
Pseudo-class elements are used:：before :after
Knowing the principle, the code is actually very simple
The border color is to set different color borders for the two triangles, and the shadow is the same, just set different colors for the two triangles.

test:before {
    
    
	...
}

test:after {
    
    
...
}

For the triangle in which direction, just give the side color opposite to the direction when setting it.

E.g:

Left triangle

#triangle-left {
    
    
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}

Insert picture description here

Right triangle

#triangle-right {
    
    
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}

Insert picture description here

1. For the above prompt box 好的，我知道了, the realization of this function.
2. The solution is to use LocalStoragelocal storage

Store when you close the prompt


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

Judge when the page is initialized

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

Insert picture description here