flexbox-safe-overflow-position-001-ref.html (1735B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0 5 --> 6 <html> 7 <head> 8 <title>Reference: Testing safe overflow-position for align-content, justify-content, and align-items in flex containers</title> 9 <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> 10 <meta charset="utf-8"> 11 <style> 12 .flex { 13 display: flex; 14 width: 85px; 15 height: 65px; 16 border: 1px solid black; 17 align-content: flex-end; 18 justify-content: center; 19 align-items: center; 20 float: left; 21 clear: both; 22 margin-top: 100px; 23 } 24 .rowNoWrap { 25 flex-flow: row nowrap; 26 } 27 .columnNoWrap { 28 flex-flow: column wrap; 29 } 30 .item { 31 border: 1px solid blue; 32 background: lightblue; 33 width: 28px; 34 height: 28px; 35 flex-shrink: 0; 36 } 37 .bigItem { 38 border: 1px solid blue; 39 background: lightblue; 40 width: 28px; 41 height: 90px; 42 flex-shrink: 0; 43 } 44 .alignContentStart { 45 align-content: start; 46 } 47 .justifyContentStart { 48 justify-content: start; 49 } 50 .alignSelfStart { 51 align-self: start; 52 } 53 </style> 54 </head> 55 <body> 56 <div class="flex rowNoWrap justifyContentStart"> 57 <div class="item"></div> 58 <div class="item"></div> 59 <div class="bigItem alignSelfStart"></div> 60 <div class="item"></div> 61 <div class="item"></div> 62 <div class="item"></div> 63 </div> 64 <div class="flex columnNoWrap alignContentStart"> 65 <div class="item"></div> 66 <div class="item"></div> 67 <div class="item"></div> 68 <div class="item"></div> 69 <div class="item"></div> 70 <div class="item"></div> 71 </div> 72 </body> 73 </html>