Skip to content

Instantly share code, notes, and snippets.

@engelju

engelju/index.html

Created August 20, 2015 14:10
Show Gist options
  • Save engelju/10ac4f510a7112c347c5 to your computer and use it in GitHub Desktop.
Save engelju/10ac4f510a7112c347c5 to your computer and use it in GitHub Desktop.
Download ZIP
Center with Flexbox™ (http://jsbin.com/tenatijago/)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Created on JS Bin</title>
</head>
<body>
<div>
This is a sample text.
</div>
<div class="flexbox-container">
<div>1</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</body>
</html>
Raw
style.css
.flexbox-container {
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
position: relative;
min-height: 200px;
background: #eee;
border: 1px solid #999;
padding: 15px;
margin-top: 10px;
}
.flexbox-container div {
height: 50px;
width: 50px;
background: #16193B;
margin: 5px;
text-align: center;
line-height: 30px;
color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment