| 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 |