Skip to content

Instantly share code, notes, and snippets.

@leepettijohn

leepettijohn/flex.html

Created July 3, 2017 13:04
Show Gist options
  • Save leepettijohn/5cd28ec22b7ebbc2be2a767dde4c4def to your computer and use it in GitHub Desktop.
Save leepettijohn/5cd28ec22b7ebbc2be2a767dde4c4def to your computer and use it in GitHub Desktop.
Download ZIP
Flex boxes - Size Changes & Number in rows
Raw
flex.html
<style>
.parent{
display:flex;
flex-wrap:wrap;
margin: -10px 0 0 -10px;
}
.child{
display:inline-block;
margin: 10px 0 0 10px;
flex-grow:1;
// Change the "5" in the next line to how many items you want per row
width: calc(100% * (1/5) - 10px - 1px)
}
</style>
<body>
<div class="parent-wrapper">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment