<!doctype html>
<html>
<head>
<style>
#main1
{
width:200px;
height: 300px;
border:1px solid black;
display: flex;
flex-direction:row;
}
#main2
{
width:200px;
height: 300px;
border:1px solid black;
display: flex;
flex-direction:row-reverse;
}
#main3
{
width:200px;
height: 300px;
border:1px solid black;
display: flex;
flex-direction:column;
}
#main4
{
width:200px;
height: 300px;
border:1px solid black;
display: flex;
flex-direction:column-reverse;
}
</style>
</head>
<body>
<h4>This is an example for flex-direction:row(default)</h4>
<div id="main1">
<div style="background-color:red;">RED</div>
<div style="background-color:lightblue;">BLUE</div>
<div style="background-color:lightgreen;">GREEN</div>
</div>
<h4>This is an example for flex-direction:row-reverse</h4>
<div id="main2">
<div style="background-color:red;">RED</div>
<div style="background-color:lightblue;">BLUE</div>
<div style="background-color:lightgreen;">GREEN</div>
</div>
<h4>This is an example for flex-direction:column</h4>
<div id="main3">
<div style="background-color:red;">RED</div>
<div style="background-color:lightblue;">BLUE</div>
<div style="background-color:lightgreen;">GREEN</div>
</div>
<h4>This is an example for flex-direction:column-reverse</h4>
<div id="main4">
<div style="background-color:red;">RED</div>
<div style="background-color:lightblue;">BLUE</div>
<div style="background-color:lightgreen;">GREEN</div>
</div>
</body>
</html>