flexbox-table-flex-items-1-ref.html (2144B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Flexbox Reference: caption size test for table flex items</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1334403"> 10 <style type="text/css"> 11 * { vertical-align: top; } 12 .flex { 13 display: inline-flex; 14 border: 3px solid grey; 15 height: 73px; 16 width: 110px; 17 align-items: start; 18 } 19 20 table { 21 border: 1px solid; 22 padding: 0; 23 margin: 0; 24 background: lightgrey; 25 flex: auto; 26 min-width: 0; 27 min-height: 0; 28 width: 32px; 29 height: 22px; 30 } 31 32 caption { border: 1px dashed blue; height: 16px; } 33 t { display:block; width:30px; height:20px; } 34 i:nth-of-type(1) { width:10px; height:20px; } 35 i:nth-of-type(2) { width:20px; height:10px; } 36 37 .hma10 { margin: 7px 3px 1px auto; } 38 .hmaa { margin: 7px auto 1px auto; } 39 .vma10 { margin: auto 7px 3px 1px; } 40 .vmaa { margin: auto 7px auto 1px; } 41 42 .vr { writing-mode: vertical-rl; } 43 </style> 44 </head> 45 <body> 46 47 <div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hma10"><caption></caption><td><t></t></td></table></div> 48 <div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="hmaa"><caption></caption><td><t></t></td></table><i></i></div> 49 50 <div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vma10"><caption></caption><td><t></t></td></table><i></i></div> 51 <div class="flex"><i></i><table cellpadding=0 cellspacing=0 class="vmaa"><caption></caption><td><t></t></td></table><i></i></div> 52 53 <div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hma10"></caption><td><t></t></td></table><i></i></div> 54 <div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="hmaa"></caption><td><t></t></td></table><i></i></div> 55 <div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vma10"></caption><td><t></t></td></table><i></i></div> 56 <div class="flex"><i></i><table cellpadding=0 cellspacing=0><caption class="vmaa"></caption><td><t></t></td></table><i></i></div> 57 58 </body> 59 </html>