flexbox-extent-long-001.html (868B)
1 <!doctype html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <title>An example of 'row-rule-extent: long'</title> 7 <style> 8 html,body { 9 color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; 10 } 11 12 .flex { 13 display: flex; 14 flex-wrap: wrap; 15 gap: 16px; 16 17 column-rule: 8px solid orange; 18 row-rule: 60% solid blue; 19 row-rule-extent: long; 20 21 place-content: center; 22 border: 5px solid; 23 margin: 2em; 24 block-size: 6em; 25 inline-size: 200px; 26 background: lightgrey; 27 } 28 29 x { 30 inline-size: 50px; 31 block-size: 2em; 32 background: grey; 33 opacity: .6; 34 } 35 x:nth-child(1) { order: 2; } 36 x:nth-child(2) { inline-size: 45px; } 37 x:nth-child(3) { inline-size: 35px; } 38 x:nth-child(4) { inline-size: 60px; } 39 40 </style> 41 42 <div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>