OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <style> | 3 <style> |
4 .flexbox { | 4 .flexbox { |
5 width: 200px; | 5 width: 200px; |
6 display: -webkit-flex; | 6 display: flex; |
7 background-color: #aaa; | 7 background-color: #aaa; |
8 position: relative; | 8 position: relative; |
9 -webkit-flex-wrap: wrap-reverse; | 9 flex-wrap: wrap-reverse; |
10 -webkit-align-items: baseline; | 10 align-items: baseline; |
11 margin-bottom: 10px; | 11 margin-bottom: 10px; |
12 } | 12 } |
13 .flexbox > div { | 13 .flexbox > div { |
14 border: 0; | 14 border: 0; |
15 } | 15 } |
16 | 16 |
17 .flexbox :nth-child(1) { | 17 .flexbox :nth-child(1) { |
18 background-color: lightblue; | 18 background-color: lightblue; |
19 } | 19 } |
20 .flexbox :nth-child(2) { | 20 .flexbox :nth-child(2) { |
21 background-color: lightgreen; | 21 background-color: lightgreen; |
22 } | 22 } |
23 .flexbox :nth-child(3) { | 23 .flexbox :nth-child(3) { |
24 background-color: pink; | 24 background-color: pink; |
25 } | 25 } |
26 .flexbox :nth-child(4) { | 26 .flexbox :nth-child(4) { |
27 background-color: yellow; | 27 background-color: yellow; |
28 } | 28 } |
29 </style> | 29 </style> |
30 <body> | 30 <body> |
31 <p>Test to make sure that wrap-reverse flips the cross axis directions and items | 31 <p>Test to make sure that wrap-reverse flips the cross axis directions and items |
32 with baseline alignment are aligned to cross axis start.</p> | 32 with baseline alignment are aligned to cross axis start.</p> |
33 | 33 |
34 <div class="flexbox"> | 34 <div class="flexbox"> |
35 <div style="-webkit-flex: 1 0 100px;">first<br>first<br>first</div> | 35 <div style="flex: 1 0 100px;">first<br>first<br>first</div> |
36 <div style="-webkit-flex: 1 0 100px;">second</div> | 36 <div style="flex: 1 0 100px;">second</div> |
37 <div style="-webkit-flex: 1 0 100px; margin-top: 5px">third</div> | 37 <div style="flex: 1 0 100px; margin-top: 5px">third</div> |
38 <div style="-webkit-flex: 1 0 100px;">fourth<br>fourth</div> | 38 <div style="flex: 1 0 100px;">fourth<br>fourth</div> |
39 </div> | 39 </div> |
40 | 40 |
41 <div class="flexbox"> | 41 <div class="flexbox"> |
42 <div style="-webkit-flex: 1 0 100px;">first<br>first<br>first</div> | 42 <div style="flex: 1 0 100px;">first<br>first<br>first</div> |
43 <div style="-webkit-flex: 1 0 100px;">second</div> | 43 <div style="flex: 1 0 100px;">second</div> |
44 <div style="-webkit-flex: 1 0 100px;">third</div> | 44 <div style="flex: 1 0 100px;">third</div> |
45 <div style="-webkit-flex: 1 0 100px; margin-bottom: 5px">fourth<br>fourth</div
> | 45 <div style="flex: 1 0 100px; margin-bottom: 5px">fourth<br>fourth</div> |
46 </div> | 46 </div> |
47 | 47 |
48 <div class="flexbox" style="width: 300px;"> | 48 <div class="flexbox" style="width: 300px;"> |
49 <div style="-webkit-flex: 1 0 100px; -webkit-align-self: flex-start; height: 1
00px">first</div> | 49 <div style="flex: 1 0 100px; align-self: flex-start; height: 100px">first</div
> |
50 <div style="-webkit-flex: 1 0 100px;">second</div> | 50 <div style="flex: 1 0 100px;">second</div> |
51 <div style="-webkit-flex: 1 0 100px;">third<br>third</div> | 51 <div style="flex: 1 0 100px;">third<br>third</div> |
52 </div> | 52 </div> |
53 | 53 |
54 </body> | 54 </body> |
55 </html> | 55 </html> |
OLD | NEW |