anhldbk · August 3, 2017 05:50
diff --git a/flexbox.html b/flexbox.html
 <html>

 <head>
    <style>
        #bar {
            background-color: #eee;
            height: 600px;
            width: 300px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start
        }
        
        #hi {
            width: 300px;
            background-color: orange;
            margin-top: auto;
 			flex: 1;
        }
        
        #lo {
            height: 80px;
            width: 300px;
            align-self: flex-end;
            background-color: red;
        }
    </style>
 </head>

 <body>
    <h1>Hello</h1>
    <div id="bar">
        <div id="hi"></div>
        <div id="lo"></div>
    </div>
 </body>

 </html>
	<html>

	<head>
	<style>
	#bar {
	background-color: #eee;
	height: 600px;
	width: 300px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start
	}

	#hi {
	width: 300px;
	background-color: orange;
	margin-top: auto;
	flex: 1;
	}

	#lo {
	height: 80px;
	width: 300px;
	align-self: flex-end;
	background-color: red;
	}
	</style>
	</head>

	<body>
	<h1>Hello</h1>
	<div id="bar">
	<div id="hi"></div>
	<div id="lo"></div>
	</div>
	</body>

	</html>