Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flex box Login Page
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox layout</title>
</head>
<body>
<div class="login-flex-container">
<div class="login-main-content">
<form class="login-form">login form ...</form>
</div>
<div class="login-footer">
footer...
</div>
</div>
</body>
</html>
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css');
html,body{
height: 100%;
}
.login-flex-container{
border:1px solid red;
display: flex;
flex-direction: column;
height: 100%;
.login-main-content{
background:green;
flex:1;
display: flex;
align-items:center;
justify-content:center;
.login-form{
width:250px;
height: 200px;
border:1px solid red;
}
}
.login-footer{
background:#555759;
flex-basis: 50px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment