cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
							<rml>
<head>
    <link type="text/rcss" href="/../Tests/Data/style.rcss" />
    <title>CSS Test: flex flow direction</title>
    <link href="https://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/xhtml1/reference/flex-direction.xht" rel="source" />
    <link href="http://www.github.com/sskyy" rel="author" title="houzhenyu" />
    <style>
        .flex-container{
            display:block;
            margin:20px;
            background-color: #333;
            line-height: 0px;
        }
        .flex-item{
            display: inline-block;
            width:50px;
            height:50px;
            margin:20px 20px;
            background-color: #eee;
            line-height: 50px;
            text-align: center;
        }

        .flex-container.flex-direction-row{
            flex-direction : row;
        }
        .flex-container.flex-direction-row-reverse{
            text-align: right;
        }

        .flex-container.flex-direction-column{
            padding:20px 0px;
        }

        .flex-container.flex-direction-column .flex-item{
            display: block;
            margin:40px 20px;
        }

        .flex-container.flex-direction-column .flex-item.first{
            margin-top:0px;
        }
        .flex-container.flex-direction-column .flex-item.last{
            margin-bottom:0px;
        }

        .flex-container.flex-direction-column-reverse{
            padding:20px 0px;
        }

        .flex-container.flex-direction-column-reverse .flex-item{
            display: block;
            margin:40px 20px;
        }

        .flex-container.flex-direction-column-reverse .flex-item.first{
            margin-top:0px;
        }
        .flex-container.flex-direction-column-reverse .flex-item.last{
            margin-bottom:0px;
        }
    </style>
</head>

<body>
    <h1>flex-direction:row</h1>
    <div class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div>

    <h1>flex-direction:row-reverse</h1>
    <div class="flex-container flex-direction-row-reverse"><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item">1</div></div>

    <h1>flex-direction:column</h1>
    <div class="flex-container flex-direction-column"><div class="flex-item first">1</div><div class="flex-item">2</div><div class="flex-item last">3</div></div>

    <h1>flex-direction:column-reverse</h1>
    <div class="flex-container flex-direction-column-reverse"><div class="flex-item first">3</div><div class="flex-item">2</div><div class="flex-item last">1</div></div>

    <handle size_target="#document"/>
</body>
</rml>