OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <style> | 3 <style> |
4 #flexbox { | 4 #flexbox { |
5 background-color: lightgrey; | 5 background-color: lightgrey; |
6 -webkit-align-items: flex-start; | 6 align-items: flex-start; |
7 } | 7 } |
8 #flexbox > * { | 8 #flexbox > * { |
9 border: 1px solid green; | 9 border: 1px solid green; |
10 } | 10 } |
11 </style> | 11 </style> |
12 <body> | 12 <body> |
13 <p> | 13 <p> |
14 This example is from the spec. There should be four flex items. Anonymous item 3
shouldn't have | 14 This example is from the spec. There should be four flex items. Anonymous item 3
shouldn't have |
15 a green border because the anonymous block is the flex item. | 15 a green border because the anonymous block is the flex item. |
16 </p> | 16 </p> |
17 <div id="flexbox" style="display: -webkit-flex"> | 17 <div id="flexbox" style="display: flex"> |
18 | 18 |
19 <!-- flex item: block child --> | 19 <!-- flex item: block child --> |
20 <div id="item1">block</div> | 20 <div id="item1">block</div> |
21 | 21 |
22 <!-- flex item: floated element; floating is ignored --> | 22 <!-- flex item: floated element; floating is ignored --> |
23 <div id="item2" style="float: left;">float</div> | 23 <div id="item2" style="float: left;">float</div> |
24 | 24 |
25 <!-- flex item: anonymous block box around inline content --> | 25 <!-- flex item: anonymous block box around inline content --> |
26 anonymous item 3 | 26 anonymous item 3 |
27 | 27 |
28 <!-- flex item: inline child --> | 28 <!-- flex item: inline child --> |
29 <span> | 29 <span> |
30 item 4 | 30 item 4 |
31 <!-- flex items do not split around blocks --> | 31 <!-- flex items do not split around blocks --> |
32 <div id=not-an-item>item 4</div> | 32 <div id=not-an-item>item 4</div> |
33 item 4 | 33 item 4 |
34 </span> | 34 </span> |
35 </div> | 35 </div> |
36 </body> | 36 </body> |
37 </html> | 37 </html> |
OLD | NEW |