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 |