anton.puiu
/
codecademy


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
							<!DOCTYPE html>
<html>

<head>
    <title>Direction</title>
    <link href='resources/css/style.css' rel='stylesheet' />
    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet'>
</head>

<body>
    <h1>Flex-Direction: Row</h1>
    <div class='container' id='row'>
        <div class='box'>
            <h2>1</h2>
        </div>
        <div class='box'>
            <h2>2</h2>
        </div>
        <div class='box'>
            <h2>3</h2>
        </div>
        <div class='box'>
            <h2>4</h2>
        </div>
        <div class='box'>
            <h2>5</h2>
        </div>
    </div>
    <h1>Flex-Direction: Row-Reverse</h1>
    <div class='container' id='row-reverse'>
        <div class='box'>
            <h2>1</h2>
        </div>
        <div class='box'>
            <h2>2</h2>
        </div>
        <div class='box'>
            <h2>3</h2>
        </div>
        <div class='box'>
            <h2>4</h2>
        </div>
        <div class='box'>
            <h2>5</h2>
        </div>
    </div>
    <h1>Flex-Direction: Column</h1>
    <div class='container' id='column'>
        <div class='box'>
            <h2>1</h2>
        </div>
        <div class='box'>
            <h2>2</h2>
        </div>
        <div class='box'>
            <h2>3</h2>
        </div>
        <div class='box'>
            <h2>4</h2>
        </div>
        <div class='box'>
            <h2>5</h2>
        </div>
    </div>
    <h1>Flex-Direction: Column-Reverse</h1>
    <div class='container' id='column-reverse'>
        <div class='box'>
            <h2>1</h2>
        </div>
        <div class='box'>
            <h2>2</h2>
        </div>
        <div class='box'>
            <h2>3</h2>
        </div>
        <div class='box'>
            <h2>4</h2>
        </div>
        <div class='box'>
            <h2>5</h2>
        </div>
    </div>
</body>

</html>