OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <link href="resources/flexbox.css" rel="stylesheet"> | 3 <link href="resources/flexbox.css" rel="stylesheet"> |
4 <style> | 4 <style> |
5 body { | 5 body { |
6 margin: 0; | 6 margin: 0; |
7 } | 7 } |
8 .flexbox { | 8 .flexbox { |
9 width: 600px; | 9 width: 600px; |
10 background-color: #aaa; | 10 background-color: #aaa; |
(...skipping 63 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
74 </div> | 74 </div> |
75 | 75 |
76 <!-- Margins set to auto don't have negative flex. --> | 76 <!-- Margins set to auto don't have negative flex. --> |
77 <div class="flexbox"> | 77 <div class="flexbox"> |
78 <div data-expected-width="150" style="-webkit-flex: 1 1 300px; -moz-flex: 1 1
300px"></div> | 78 <div data-expected-width="150" style="-webkit-flex: 1 1 300px; -moz-flex: 1 1
300px"></div> |
79 <div data-expected-width="300" data-offset-x="150" style="-webkit-flex: 1 0 30
0px; -moz-flex: 1 0 300px; margin: 0 auto;"></div> | 79 <div data-expected-width="300" data-offset-x="150" style="-webkit-flex: 1 0 30
0px; -moz-flex: 1 0 300px; margin: 0 auto;"></div> |
80 <div data-expected-width="150" data-offset-x="450" style="-webkit-flex: 1 1 30
0px; -moz-flex: 1 1 300px"></div> | 80 <div data-expected-width="150" data-offset-x="450" style="-webkit-flex: 1 1 30
0px; -moz-flex: 1 1 300px"></div> |
81 </div> | 81 </div> |
82 | 82 |
83 <div class="flexbox"> | 83 <div class="flexbox"> |
84 <div data-expected-width="300px" data-offset-x="150" style="-webkit-flex: 0 0
300px; -moz-flex: 0 0 300px; margin: 0 auto;"></div> | 84 <div data-expected-width="300" data-offset-x="150" style="-webkit-flex: 0 0 30
0px; -moz-flex: 0 0 300px; margin: 0 auto;"></div> |
85 </div> | 85 </div> |
86 | 86 |
87 <!-- margin: auto safe centers, which means it won't overflow to before the star
t of the flexbox. --> | 87 <!-- margin: auto safe centers, which means it won't overflow to before the star
t of the flexbox. --> |
88 <div class="flexbox"> | 88 <div class="flexbox"> |
89 <div data-expected-width="700px" data-offset-x="0" style="-webkit-flex: 0 0 70
0px; -moz-flex: 0 0 700px; margin: 0 auto;"></div> | 89 <div data-expected-width="700" data-offset-x="0" style="-webkit-flex: 0 0 700p
x; -moz-flex: 0 0 700px; margin: 0 auto;"></div> |
90 </div> | 90 </div> |
91 | 91 |
92 <div class="flexbox"> | 92 <div class="flexbox"> |
93 <div data-expected-width="600px" data-offset-x="0" style="-webkit-flex: 1 0 30
0px; -moz-flex: 1 0 300px; margin: 0 auto;"></div> | 93 <div data-expected-width="600" data-offset-x="0" style="-webkit-flex: 1 0 300p
x; -moz-flex: 1 0 300px; margin: 0 auto;"></div> |
94 </div> | 94 </div> |
95 | 95 |
96 <div class="flexbox"> | 96 <div class="flexbox"> |
97 <div data-expected-width="600" data-offset-x="0" class="flex4" style="margin:
0 auto;"> | 97 <div data-expected-width="600" data-offset-x="0" class="flex4" style="margin:
0 auto;"> |
98 <div style="width: 100px; height: 100%;"></div> | 98 <div style="width: 100px; height: 100%;"></div> |
99 </div> | 99 </div> |
100 </div> | 100 </div> |
101 | 101 |
102 <div class="flexbox" style="margin: 100px;"> | 102 <div class="flexbox" style="margin: 100px;"> |
103 <div data-expected-width="300" data-offset-x="0" class="flex1" style="margin:
0 auto;"></div> | 103 <div data-expected-width="300" data-offset-x="0" class="flex1" style="margin:
0 auto;"></div> |
104 <div data-expected-width="300" data-offset-x="300" class="flex1" style="margin
: 0 auto;"></div> | 104 <div data-expected-width="300" data-offset-x="300" class="flex1" style="margin
: 0 auto;"></div> |
105 </div> | 105 </div> |
106 | 106 |
107 <div class="flexbox" style="padding: 100px;"> | 107 <div class="flexbox" style="padding: 100px;"> |
108 <div data-expected-width="300" data-offset-x="100" style="-webkit-flex: 1 0 0p
x; -moz-flex: 1 0 0px; margin: 0 auto;"></div> | 108 <div data-expected-width="300" data-offset-x="100" style="-webkit-flex: 1 0 0p
x; -moz-flex: 1 0 0px; margin: 0 auto;"></div> |
109 <div data-expected-width="300" data-offset-x="400" style="-webkit-flex: 1 0 0e
m; -moz-flex: 1 0 0em; margin: 0 auto;"></div> | 109 <div data-expected-width="300" data-offset-x="400" style="-webkit-flex: 1 0 0e
m; -moz-flex: 1 0 0em; margin: 0 auto;"></div> |
110 </div> | 110 </div> |
111 | 111 |
112 <div class="flexbox"> | 112 <div class="flexbox"> |
113 <div data-expected-width="75" data-offset-x="0" class="flex1-0-0" style="margi
n: 0 auto;"></div> | 113 <div data-expected-width="75" data-offset-x="0" class="flex1-0-0" style="margi
n: 0 auto;"></div> |
114 <div data-expected-width="350" data-offset-x="75" class="flex2-0-0" style="pad
ding: 0 100px;"></div> | 114 <div data-expected-width="350" data-offset-x="75" class="flex2-0-0" style="pad
ding: 0 100px;"></div> |
115 <div data-expected-width="75" data-offset-x="525" class="flex1-0-0" style="mar
gin-left: 100px;"></div> | 115 <div data-expected-width="75" data-offset-x="525" class="flex1-0-0" style="mar
gin-left: 100px;"></div> |
116 </div> | 116 </div> |
117 | 117 |
118 </body> | 118 </body> |
119 </html> | 119 </html> |
OLD | NEW |