flex-direction-row-reverse-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<head>

    <title>CSS Flexible Box Test: flex-direction proprety - row-reverse</title>

    <link rel="author" title="haosdent" href="mailto:haosdent@gmail.com">

    <style type="text/css">

        .container {

	position: relative;

	background: red;

	margin: 1em 0;

	border: 1px solid black;

	text-align: right;

	span {

	display: inline-block;

	background: green;

	color: white;

	margin: 1em;

	width: 8em;

	text-align: left;

    </style>

</head>

<body>

    <p>The test passed if you see all the cells are arranged horizontally and the order of cells are reversed.</p>

    <div class="container">

      <span>forth</span><span>third</span><span>second</span><span>first</span>

    </div>

</body>

</html>