Skip to content

Commit ad8ddf6

Browse files
jayconsciousjayconscious
committed
feat: hand practice
1 parent 073f977 commit ad8ddf6

File tree

2 files changed

+107
-0
lines changed

2 files changed

+107
-0
lines changed

‎demos/interview/css-flex-1.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>flex-css</title>
8+
<style>
9+
.wrap {
10+
display: flex;
11+
width: 800px;
12+
}
13+
/* .middle {
14+
display: flex;
15+
flex: 1;
16+
} */
17+
.inner1 {
18+
/* flex-shrink: 1;
19+
flex-grow: 1; */
20+
width: 100px;
21+
flex: 1;
22+
/* flex-basis: 100px; */
23+
}
24+
25+
.inner2 {
26+
width: 200px;
27+
flex: 1;
28+
}
29+
30+
.inner3 {
31+
width: 250px;
32+
flex: 2;
33+
}
34+
</style>
35+
</head>
36+
37+
<body>
38+
<div class="wrap">
39+
<div class="inner1">111111111111111111111111111111111111111111111111111111</div>
40+
<div class="inner2">222</div>
41+
<div class="inner3">333</div>
42+
</div>
43+
44+
</body>
45+
46+
</html>

‎demos/interview/css-flex-2.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
<style>
9+
* {
10+
margin: 0; padding: 0;
11+
}
12+
.father {
13+
height: 100px;
14+
width: 500px;
15+
background-color: salmon;
16+
display: flex;
17+
}
18+
.first {
19+
width: 200px;
20+
background-color: blue;
21+
}
22+
.second {
23+
background-color: bisque;
24+
flex: 1;
25+
width: 100px;
26+
}
27+
.grandSun {
28+
width: 50px;
29+
}
30+
.third {
31+
background-color: aqua;
32+
flex: 1;
33+
width: 100px;
34+
}
35+
.grandSun2 {
36+
width: 9999999px;
37+
}
38+
.forth {
39+
width: 200px;
40+
background-color: aquamarine;
41+
}
42+
.forthSun {
43+
width: 200px;
44+
}
45+
</style>
46+
</head>
47+
<body>
48+
<div class="father">
49+
<div class="first">150px被挤压</div>
50+
<div class="second">
51+
<div class="grandSun">100px满足孙子</div>
52+
</div>
53+
<div class="third">
54+
<div class="grandSun2">200px受限于其父</div>
55+
</div>
56+
<div class="forth">
57+
<div class="forthSun">200px</div>
58+
</div>
59+
</div>
60+
</body>
61+
</html>

0 commit comments

Comments
 (0)