<!DOCTYPE html> <html><head> <title>CSS Test: flex container multiline wrapping in row-reverse direction</title> <link href="mailto:tmtysk@gmail.com" rel="author" title="tmtysk"> <link href="mailto:jackalmage@gmail.com" rel="reviewer" title="Tab Atkins"> <link href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap" rel="help"> <link href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" rel="help"> <link href="reference/multi-line-wrap-with-row-reverse-ref.htm" rel="match"> <meta content="This test check that a flex container wraps blocks multiline in row-reverse direction." name="assert"> <style> #test { display: flex; flex-direction: row-reverse; flex-wrap: wrap; width: 300px; } p { margin-right: 10px; background: #ccc; } #row1-col1 { width: 90px; } #row1-col2 { width: 90px; } #row1-col3 { width: 90px; } #row2-col1 { width: 140px; } #row2-col2 { width: 140px; } #row3-col1 { width: 290px; } </style> </head> <body> <div id="test"> <p id="row1-col3">1-3</p> <p id="row1-col2">1-2</p> <p id="row1-col1">1-1</p> <p id="row2-col2">2-2</p> <p id="row2-col1">2-1</p> <p id="row3-col1">3-1</p> </div> </body></html>