Skip to content

Instantly share code, notes, and snippets.

@yordanzhelevdev

yordanzhelevdev/items.css

Created April 16, 2019 07:01
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 yordanzhelevdev/768d5fc612f7321e9626316508064b51 to your computer and use it in GitHub Desktop.
Save yordanzhelevdev/768d5fc612f7321e9626316508064b51 to your computer and use it in GitHub Desktop.
Download ZIP
Unknown number items spacing distribution with flexbox
Raw
items.css
.items {
display: flex;
flex-wrap: wrap;
width: 1000px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: -3% 0 0 -3%;
}
.item {
width: 200px;
height: 100px;
background: teal;
margin: 3% 0 0 3%;
}
Raw
items.html
<div class="items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment