OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <style> | 2 <style> |
3 .flexbox { | 3 .flexbox { |
4 display: flex; | 4 display: flex; |
5 background: papayawhip; | 5 background: papayawhip; |
6 border: 1px solid midnightblue; | 6 border: 1px solid midnightblue; |
7 margin: 1em; | 7 margin: 1em; |
8 width: 50px; | 8 width: 50px; |
9 } | 9 } |
10 | 10 |
11 .flexbox > div { | 11 .flexbox > div { |
12 margin: 5px; | 12 margin: 5px; |
13 min-width: 10px; | 13 min-width: 10px; |
14 min-height: 10px; | 14 min-height: 10px; |
15 background-color: lawngreen; | 15 background-color: lawngreen; |
16 } | 16 } |
17 | 17 |
18 .column { | 18 .column { |
19 -webkit-flex-flow: column; | 19 flex-flow: column; |
20 } | 20 } |
21 | 21 |
22 .horizontal-tb { | 22 .horizontal-tb { |
23 -webkit-writing-mode: horizontal-tb; | 23 -webkit-writing-mode: horizontal-tb; |
24 } | 24 } |
25 .vertical-lr { | 25 .vertical-lr { |
26 -webkit-writing-mode: vertical-lr; | 26 -webkit-writing-mode: vertical-lr; |
27 } | 27 } |
28 | 28 |
29 .largeitem { | 29 .largeitem { |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
63 <div class="largeitem"></div> | 63 <div class="largeitem"></div> |
64 </div> | 64 </div> |
65 | 65 |
66 <script> | 66 <script> |
67 document.body.offsetTop; | 67 document.body.offsetTop; |
68 var targets = document.getElementsByClassName('largeitem'); | 68 var targets = document.getElementsByClassName('largeitem'); |
69 for (var i = targets.length - 1; i >= 0; i--) { | 69 for (var i = targets.length - 1; i >= 0; i--) { |
70 targets[i].remove(); | 70 targets[i].remove(); |
71 }; | 71 }; |
72 </script> | 72 </script> |
OLD | NEW |