-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
67 lines (61 loc) · 1.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css-flex-issue</title>
<style>
* {
margin: 0;
padding: 0;
}
.css-flex-issue {
display: flex;
width: 600px;
margin: 50px auto;
background-color: #532d61;
color: #b7adbb;
}
.left-item {
width: 150px;
flex-shrink: 0;
text-align: center;
line-height: 1.8;
padding: 15px;
}
.right-item {
display: flex;
flex-grow: 1;
}
.item {
width: 33.3333%;
}
.key-issue {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="css-flex-issue">
<div class="left-item">expect</div>
<div class="right-item">
<div style="background-color: #33153e;" class="item">
<p class="key-issue">expect!!!</p>
</div>
<div style="background-color: #a36;" class="item">2</div>
<div style="background-color: #66287d;" class="item">3</div>
</div>
</div>
<div class="css-flex-issue">
<div class="left-item">if use percent in flex child element, the text is long enough,flex will be auto automatic widening!</div>
<div class="right-item">
<div style="background-color: #33153e;" class="item">
<p class="key-issue">if use percent in flex child element, the text is long enough,flex will be auto automatic widening!if use percent in flex child element, the text is long enough,flex will be auto automatic widening!if use percent in flex child element, the text is long enough,flex will be auto automatic widening!if use percent in flex child element, the text is long enough,flex will be auto automatic widening!</p>
</div>
<div style="background-color: #a36;" class="item">2</div>
<div style="background-color: #66287d;" class="item">3</div>
</div>
</div>
</body>
</html>