-
Notifications
You must be signed in to change notification settings - Fork 1
/
flexShrinkCalc.html
50 lines (50 loc) · 1.33 KB
/
flexShrinkCalc.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex shrink 计算说明</title>
<style>
.flex-wrap{
display: flex;
width: 400px;
height: 100px;
border: 1px solid #ddd;
}
.flex-item{
flex-basis: 200px;
}
.item1{
flex-shrink: 2;
background: #66efab;
}
.item2{
flex-shrink: 3;
background: #efe24e;
}
.item3{
background: #ef6754;
}
.flex-wrap2 .item1{
min-width: 160px;
}
</style>
</head>
<body>
<div class="flex-wrap">
<div class="flex-item item1">item1</div>
<div class="flex-item item2">item2</div>
<div class="flex-item item3">item3</div>
</div>
<!--
当shrink计算后的item1的宽度为133.33 小于160时,
不足的部分需要item2,item3安比例补足,
即item2的实际宽度为200 - 3 / 6 * 200 - (160 - 133.33) * 3 / 4 = 80
item3的实际宽度为200 - 1 / 6 * 200 - (160 - 133.33) * 1 / 4 = 160
-->
<div class="flex-wrap flex-wrap2">
<div class="flex-item item1">item1</div>
<div class="flex-item item2">item2</div>
<div class="flex-item item3">item3</div>
</div>
</body>
</html>