flexbox_flex-natural-mixed-basis-auto-ref.html (688B)
1 <!DOCTYPE html> 2 <title>flexbox | flex: larger integer, mixed basis, auto</title> 3 <link rel="author" href="http://opera.com" title="Opera Software"> 4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 5 <style> 6 div { 7 font-family: ahem; 8 background: blue; 9 height: 8em; 10 width: 35em; 11 } 12 span { 13 font-family: ahem; 14 height: 8em; 15 display: inline-block; 16 } 17 span:nth-child(1) { 18 background: yellow; 19 width: 3em; 20 } 21 span:nth-child(2) { 22 background: pink; 23 width: 6em; 24 } 25 span:nth-child(3) { 26 background: lightblue; 27 width: 8em; 28 } 29 span:nth-child(4) { 30 background: grey; 31 width: 18em; 32 } 33 </style> 34 35 <div> 36 <span>a</span><span>aaa</span><span>aaaaa</span><span>aaaaaaaaaaaaaaa</span> 37 </div>