flex-item-vertical-align.html (890B)
1 <!DOCTYPE html> 2 <link href="support/flexbox.css" rel="stylesheet"> 3 <title>CSS Flexbox: vertical-align on a flex item</title> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> 5 <link rel="help" href="https://drafts.csswg.org/css-inline/#propdef-vertical-align"> 6 <link rel="match" href="reference/flex-item-vertical-align-ref.html"> 7 <meta name="assert" content="vertical-align should have no effect on a flex item, i.e. flex items' content should not be shifted by the vertical-align."> 8 9 <style> 10 .flexbox { 11 background-color: lightgrey; 12 } 13 #item1 { 14 vertical-align: 10px; 15 } 16 #item3 { 17 vertical-align: 30px; 18 } 19 </style> 20 21 <div class='flexbox'> 22 <!-- flex item: block child --> 23 <div id='item1'>block</div> 24 <!-- flex item: anonymous block box around inline content --> 25 anonymous item 2 26 <!-- flex item: inline child --> 27 <span id='item3'>item 3</span> 28 </div>