Skip to content

Instantly share code, notes, and snippets.

@andrey-shikhov

andrey-shikhov/css-flexbox.html

Created October 28, 2016 10:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrey-shikhov/f003d6c82ed307f6a1e24786207fcbeb to your computer and use it in GitHub Desktop.
Save andrey-shikhov/f003d6c82ed307f6a1e24786207fcbeb to your computer and use it in GitHub Desktop.
Download ZIP
css flexbox center with margin right
Raw
css-flexbox.html
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
-webkit-justify-content: center;
display: flex;
width: 100px;
height: 20px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 20px;
height: 20px;
margin-right: 20px;
}
.item-10 {
background-color: white;
width: 10px;
height: 20px;
}
.item-10b {
background-color: black;
width: 10px;
height: 20px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item-10"></div>
<div class="item-10b"></div>
<div class="item-10"></div>
<div class="item-10b"></div>
<div class="item-10"></div>
<div class="item-10b"></div>
<div class="item-10"></div>
<div class="item-10b"></div>
<div class="item-10"></div>
<div class="item-10b"></div>
</div>
<div class="flex-container">
<div class="flex-item"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment