Untitled

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Learning CSS</title>
		<style>
            .flex-first {
                height: 100px;
                border: 1px solid black;
                margin-bottom: 10px;
                display: -webkit-flex;
                display: flex;
                -webkit-flex-direction: row-reverse;
                flex-direction: row-reverse;
                -webkit-justify-content: space-between;
                justify-content: space-between;
                -webkit-align-items: center;
                align-items: center;
            }

            .flex-second {
                height: 100px;
                border: 1px solid black;
                display: -webkit-flex;
                 display: flex;
                -webkit-flex-direction: row;
                flex-direction: row-reverse;
                -webkit-justify-content: flex-end;
                justify-content: space-between;
                -webkit-align-items: flex-end;
                align-items: flex-end;
            }

            .flex-first .item {
                border: 2px solid green;
            }

            .flex-second .item {
                border: 2px solid blue;
            }

            .item {
                margin-right: 5px;
                text-align: center;
                padding: 5px;
                width: 100px;
            }
		</style>
	</head>
	<body>
	    <div class="flex-first">
            <div class="item">Div1</div>
            <div class="item">Div2</div>
            <div class="item">Div3</div>
        </div>

        <div class="flex-second">
            <div class="item">Div4</div>
            <div class="item">Div5</div>
            <div class="item">Div6</div>
        </div>
	</body>
</html>