dino@apple.com | 7a1557d | 2014-09-12 22:41:09 +0000 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <title>flexbox | flex-basis: percentage</title> |
| 3 | <link rel="author" href="http://opera.com" title="Opera Software"> |
| 4 | <style> |
| 5 | div { |
| 6 | white-space: nowrap; |
| 7 | background: blue; |
| 8 | margin: 1em 0; |
| 9 | border: 1px solid black; |
| 10 | height: 8em; |
| 11 | width: 8em; |
| 12 | } |
| 13 | span { |
| 14 | background: yellow; |
| 15 | margin: 1em 0; |
| 16 | width: 8em; |
| 17 | height: 6em; |
| 18 | display: inline-block; |
| 19 | } |
| 20 | span:nth-child(2) {background: pink;} |
| 21 | span:nth-child(3) {background: lightblue;} |
| 22 | span:nth-child(4) {background: grey;} |
| 23 | </style> |
| 24 | |
| 25 | <div> |
| 26 | <span>one</span><span>two</span><span>three</span><span>four</span> |
| 27 | </div> |