-
-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathflex.html
138 lines (138 loc) · 7.49 KB
/
flex.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<style>
.container {
display: flex;
width: 400px;
}
.container .child-1 {
background-color: red;
height: 2em;
}
.container .child-2 {
background-color: blue;
height: 2em;
}
.container .subchild-1 {
background-color: green;
}
.container .subchild-2 {
background-color: yellow;
}
</style>
</head>
<body>
ruler
<div class="container">
<div style="width: 50px; background-color: magenta;">50</div>
<div style="width: 50px; background-color: cyan;">50</div>
<div style="width: 50px; background-color: magenta;">50</div>
<div style="width: 50px; background-color: cyan;">50</div>
<div style="width: 50px; background-color: magenta;">50</div>
<div style="width: 50px; background-color: cyan;">50</div>
<div style="width: 50px; background-color: magenta;">50</div>
<div style="width: 50px; background-color: cyan;">50</div>
</div>
flex-grow 1 1 (the default). child-1 wants 100, child-2 wants 150, we have 150 left to 400. So divide this 150 equally, 75 each. Thus adds 75 (175 = 100 + 75) to child-1 and 75 to child-2 (225 = 150 + 75)
<div class="container">
<div class="child-1" style="flex-grow: 1;"><div class="subchild-1" style="width: 100px">100</div></div>
<div class="child-2" style="flex-grow: 1;"><div class="subchild-2" style="width: 150px">150</div></div>
</div>
flex-grow 1 1. Analogous, adds 50 to each.
<div class="container">
<div class="child-1" style="flex-grow: 1;"><div class="subchild-1" style="width: 150px">150</div></div>
<div class="child-2" style="flex-grow: 1;"><div class="subchild-2" style="width: 150px">150</div></div>
</div>
flex-grow 1 1 flex-basis: 150px. child-1 wants to have 150, just like child-2. So add 50 each.
<div class="container">
<div class="child-1" style="flex-grow: 1; flex-basis: 150px;"><div class="subchild-1" style="width: 100px">100</div></div>
<div class="child-2" style="flex-grow: 1;"><div class="subchild-2" style="width: 150px">150</div></div>
</div>
flex-grow 1 1 flex-basis 100. flex-basis is still used as the value that counts even if it is smaller than the minimal content size.
<div class="container">
<div class="child-1" style="flex-grow: 1; flex-basis: 100px;"><div class="subchild-1" style="width: 150px">150</div></div>
<div class="child-2" style="flex-grow: 1;"><div class="subchild-2" style="width: 150px">150</div></div>
</div>
flex-grow 1 2. child-1 wants 100, child-2 wants 200. We have 100 left to 400. Because of flex-grow 2, child-2 will grow 2x more than child-1, so child-1 grows 33 from 100 to 133 and child-2 grows 67 from 200 to 267
<div class="container">
<div class="child-1" style="flex-grow: 1;"><div class="subchild-1" style="width: 100px">100</div></div>
<div class="child-2" style="flex-grow: 2;"><div class="subchild-2" style="width: 200px">200</div></div>
</div>
flex-grow 1 2
<div class="container">
<div class="child-1" style="flex-grow: 1;"><div class="subchild-1" style="width: 100px">100</div></div>
<div class="child-2" style="flex-grow: 2;"><div class="subchild-2" style="width: 250px">250</div></div>
</div>
flex-grow 0 1. child-1 simply cannot grow, so child-2 takes up all remaining space.
<div class="container">
<div class="child-1" style="flex-grow: 0"><div class="subchild-1" style="width: 50px">50</div></div>
<div class="child-2" style="flex-grow: 1"><div class="subchild-2" style="width: 50px">50</div></div>
</div>
flex-grow 0 0. How much is 300 divided by 0? Doesn't matter, if neither can grow we go below the min.
<div class="container">
<div class="child-1" style="flex-grow: 0"><div class="subchild-1" style="width: 50px">50</div></div>
<div class="child-2" style="flex-grow: 0"><div class="subchild-2" style="width: 50px">50</div></div>
</div>
No more space left, all fits perfectly.
<div class="container">
<div class="child-1"><div class="subchild-1" style="width: 100px">100</div></div>
<div class="child-2"><div class="subchild-2" style="width: 300px">300</div></div>
</div>
flex-basis 200. child-1 wants to be 200, child-2 also 200, there is enough space, so let child-1 be 200.
<div class="container">
<div class="child-1" style="flex-basis: 200px"><div class="subchild-1" style="width: 100px">100</div></div>
<div class="child-2"><div class="subchild-2" style="width: 200px">200</div></div>
</div>
flex-basis 200. child-1 wants to be 200, but child-2 needs 250, so we can only give child-1 50
<div class="container">
<div class="child-1" style="flex-basis: 200px"><div class="subchild-1" style="width: 100px">100</div></div>
<div class="child-2"><div class="subchild-2" style="width: 250px">250</div></div>
</div>
flex-basis 200 flex-shrink 0. child-1 refuses to shrink due to shrink 0, so we have no choice but to overflow the container.
<div class="container">
<div class="child-1" style="flex-basis: 200px; flex-shrink: 0;"><div class="subchild-1" style="width: 100px">100</div></div>
<div class="child-2"><div class="subchild-2" style="width: 250px">250</div></div>
</div>
flex-basis 300 300. Both want 300px. There isn't enough space, so we shrink both by an equal amount, from 300 to 150.
<div class="container">
<div class="child-1" style="flex-basis: 300px"><div class="subchild-1" style="width: 50px">50</div></div>
<div class="child-2" style="flex-basis: 300px"><div class="subchild-2" style="width: 150px">150</div></div>
</div>
flex-basis 300 300 flex-shrink 2 1. This time, child-1 will shrink 2x more than child-2. We need to shrink from 600 to 400, child-2 shrinks 200/3 = 66 from 300 to 233, and child-1 shrinks 2*66 = 133 from 300 to 167
<div class="container">
<div class="child-1" style="flex-basis: 300px;flex-shrink: 2;"><div class="subchild-1" style="width: 50px">50</div></div>
<div class="child-2" style="flex-basis: 300px;flex-shrink: 1;"><div class="subchild-2" style="width: 150px">150</div></div>
</div>
minimal content size doesn't fit, nothing we can do about it
<div class="container">
<div class="child-1"><div class="subchild-1" style="width: 100px">100</div></div>
<div class="child-2"><div class="subchild-2" style="width: 400px">400</div></div>
</div>
flex-grow 0 1 + reflowing text content
<div class="container">
<div class="child-1" style="flex-grow: 0; height: auto;"><div class="subchild-1" style="width: 50px">50</div></div>
<div class="child-2" style="flex-grow: 1; height: auto;"><div class="subchild-2">asdf qwer asdf2 qwer2 asdf3 qwer3 asdf4 qwer4 asdf5 qwer5 asdf6 qwre6 asdf7 qwer7 asdf8 qwer8 asdf9 qwer9</div></div>
</div>
flex-grow 1 1 + reflowing text content
<div class="container">
<div class="child-1" style="flex-grow: 1; height: auto;"><div class="subchild-1" style="width: 50px">50</div></div>
<div class="child-2" style="flex-grow: 1; height: auto;"><div class="subchild-2">asdf qwer asdf2 qwer2 asdf3 qwer3 asdf4 qwer4 asdf5 qwer5 asdf6 qwre6 asdf7 qwer7 asdf8 qwer8 asdf9 qwer9</div></div>
</div>
flex-grow 0 1 + reflowing text content, and align-items center
<div class="container" style="align-items: center;">
<div class="child-1" style="flex-grow: 0; height: auto;"><div class="subchild-1" style="width: 50px">50</div></div>
<div class="child-2" style="flex-grow: 1; height: auto;"><div class="subchild-2">asdf qwer asdf2 qwer2 asdf3 qwer3 asdf4 qwer4 asdf5 qwer5 asdf6 qwre6 asdf7 qwer7 asdf8 qwer8 asdf9 qwer9</div></div>
</div>
<script>
for (let container of document.getElementsByClassName('container')) {
const widths = [];
for (let child of container.children) {
widths.push(child.offsetWidth)
}
container.insertAdjacentHTML('afterEnd', `<div>widths: ${widths.join(' ')}</div>`)
}
</script>
</body>
</html>