flexbox_interactive_break-after-line-order.html (756B)
1 <!DOCTYPE html> 2 <title>flexbox | order, break-after, multiline</title> 3 <link rel="author" href="http://opera.com" title="Opera Software"> 4 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#pagination"> 5 <meta name="flags" content="interact paged"> 6 <style> 7 * {widows: 1; orphans: 1;} 8 div { 9 background: red; 10 border: 1px solid black; 11 width: 20em; 12 13 display: flex; 14 flex-wrap: wrap; 15 } 16 p { 17 background: white; 18 margin: 0; 19 width: 100%; 20 height: 2em; 21 22 flex: 1 0 auto; 23 } 24 p+p {background: red;} 25 @media projection, print { 26 p:first-child { 27 break-after: always; 28 background: red; 29 order: 0; 30 } 31 p+p { 32 background: yellow; 33 order: -1; 34 } 35 } 36 </style> 37 38 <h4>Enter fullscreen or print preview. There should be no red.</h4> 39 40 <div> 41 <p></p> 42 <p></p> 43 </div>