| 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 |