flexbox_flex-formatting-interop.html (719B)
1 <!DOCTYPE html> 2 <title>flexbox | flex formatting context :: negative margins and 3 border box</title> 4 <link rel="author" href="http://opera.com" title="Opera Software"> 5 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> 6 <link rel="match" href="flexbox_flex-formatting-interop-ref.html"> 7 <style> 8 * {margin: 0;} 9 .float { 10 background: lightblue; 11 width: 200px; 12 float: left; 13 } 14 #flex { 15 background: #ffcc00; 16 margin-left: -200px; 17 width: 200px; 18 19 display: flex; 20 } 21 div div { 22 border: 2px solid transparent; 23 margin: 0 2em 2em; 24 flex: none; 25 } 26 p { 27 clear: both; 28 margin: 2em 0; 29 } 30 </style> 31 32 <div class="float">float</div> 33 34 <div id="flex"> 35 <div>xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx</div> 36 </div>