| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <style> | 3 <style> |
| 4 .flexbox { | 4 .flexbox { |
| 5 display: -webkit-flex; | 5 display: flex; |
| 6 background-color: #aaa; | 6 background-color: #aaa; |
| 7 position: relative; | 7 position: relative; |
| 8 -webkit-flex-wrap: wrap; | 8 flex-wrap: wrap; |
| 9 -webkit-flex-direction: column; | 9 flex-direction: column; |
| 10 float: left; | 10 float: left; |
| 11 -webkit-align-content: flex-start; | 11 align-content: flex-start; |
| 12 } | 12 } |
| 13 .flexbox > * { | 13 .flexbox > * { |
| 14 -webkit-flex: none; | 14 flex: none; |
| 15 } | 15 } |
| 16 .flexbox :nth-child(1) { | 16 .flexbox :nth-child(1) { |
| 17 background-color: lightblue; | 17 background-color: lightblue; |
| 18 } | 18 } |
| 19 .flexbox :nth-child(2) { | 19 .flexbox :nth-child(2) { |
| 20 background-color: lightgreen; | 20 background-color: lightgreen; |
| 21 } | 21 } |
| 22 .flexbox :nth-child(3) { | 22 .flexbox :nth-child(3) { |
| 23 background-color: pink; | 23 background-color: pink; |
| 24 } | 24 } |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 61 <div style="width: 100px; height: 10px"></div> | 61 <div style="width: 100px; height: 10px"></div> |
| 62 <div style="width: 100px; height: 10px"></div> | 62 <div style="width: 100px; height: 10px"></div> |
| 63 <div style="width: 100px; height: 20px"></div> | 63 <div style="width: 100px; height: 20px"></div> |
| 64 </div> | 64 </div> |
| 65 </div> | 65 </div> |
| 66 <p style="clear:left">The grey background should be 100px wide and 5px should | 66 <p style="clear:left">The grey background should be 100px wide and 5px should |
| 67 stick out the bottom.</p> | 67 stick out the bottom.</p> |
| 68 | 68 |
| 69 </body> | 69 </body> |
| 70 </html> | 70 </html> |
| OLD | NEW |