OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <style> | 3 <style> |
4 body { | 4 body { |
5 margin: 0; | 5 margin: 0; |
6 } | 6 } |
7 .flexbox { | 7 .flexbox { |
8 width: 600px; | 8 width: 600px; |
9 display: flex; | 9 display: flex; |
10 background-color: #aaa; | 10 background-color: #aaa; |
(...skipping 24 matching lines...) Expand all Loading... |
35 } | 35 } |
36 | 36 |
37 .nested { | 37 .nested { |
38 display: flex; | 38 display: flex; |
39 background-color: #ddd; | 39 background-color: #ddd; |
40 } | 40 } |
41 | 41 |
42 .rtl { | 42 .rtl { |
43 direction: rtl; | 43 direction: rtl; |
44 } | 44 } |
45 .bt { | |
46 -webkit-writing-mode: horizontal-bt; | |
47 } | |
48 .vertical-rl { | 45 .vertical-rl { |
49 -webkit-writing-mode: vertical-rl; | 46 -webkit-writing-mode: vertical-rl; |
50 } | 47 } |
51 .vertical-lr { | 48 .vertical-lr { |
52 -webkit-writing-mode: vertical-lr; | 49 -webkit-writing-mode: vertical-lr; |
53 } | 50 } |
54 .row-reverse { | 51 .row-reverse { |
55 flex-flow: row-reverse; | 52 flex-flow: row-reverse; |
56 } | 53 } |
57 .column { | 54 .column { |
(...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
122 <div class="flexbox vertical-lr" style="height: 100px"> | 119 <div class="flexbox vertical-lr" style="height: 100px"> |
123 <div class="column nested" style="flex: 1; width: 100px;"> | 120 <div class="column nested" style="flex: 1; width: 100px;"> |
124 <div data-expected-width="50" style="flex: 1 0 auto;"></div> | 121 <div data-expected-width="50" style="flex: 1 0 auto;"></div> |
125 <div data-expected-width="50" style="flex: 1 0 auto;"></div> | 122 <div data-expected-width="50" style="flex: 1 0 auto;"></div> |
126 </div> | 123 </div> |
127 <div data-expected-height="50" style="flex: 1 0 0;"></div> | 124 <div data-expected-height="50" style="flex: 1 0 0;"></div> |
128 </div> | 125 </div> |
129 | 126 |
130 </body> | 127 </body> |
131 </html> | 128 </html> |
OLD | NEW |