Skip to content

Instantly share code, notes, and snippets.

@rihardn

rihardn/flexboxes.html

Created March 24, 2023 08:57
Show Gist options
  • Save rihardn/01ca26d8a2bdfb3c117fb241b1defef7 to your computer and use it in GitHub Desktop.
Save rihardn/01ca26d8a2bdfb3c117fb241b1defef7 to your computer and use it in GitHub Desktop.
Download ZIP
Css Flexboxes
Raw
flexboxes.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexboxes</title>
</head>
<body>
<div class="post-content-wrapper">
<div class="flex-rows">
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-break flex-rows-break-invisible"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-break flex-rows-break-invisible"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-break flex-rows-break-invisible"></div>
<div class="flex-rows-child"></div>
</div>
</div>
<div class="post-content-wrapper">
<div class="flex-rows">
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
</div>
</div>
<div class="post-content-wrapper">
<div class="flex-rows">
<div class="flex-rows-child"></div>
<div class="flex-rows-break"></div>
<div class="flex-rows-child"></div>
</div>
</div>
<div class="post-content-wrapper">
<div class="flex-rows">
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-break"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-break"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
</div>
</div>
<div class="post-content-wrapper">
<div class="flex-rows flex-rows-columns">
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-break"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-break"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
</div>
</div>
<div class="post-content-wrapper">
<div class="flex-rows">
<div class="flex-rows-child"></div>
<div class="flex-rows-child flex-rows-child-wide"></div>
<div class="flex-rows-child"></div>
</div>
</div>
<div class="post-content-wrapper">
<div class="flex-rows">
<div class="flex-rows-child"></div>
<div class="flex-rows-child flex-rows-child-wide"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-break flex-rows-break-invisible"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
</div>
</div>
<div class="post-content-wrapper">
<div class="flex-rows">
<div class="flex-rows-child"></div>
<div class="flex-rows-child flex-rows-child-wide"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
</div>
</div>
<div class="post-content-wrapper">
<div class="flex-rows">
<div class="flex-rows-child"></div>
<div class="flex-rows-child flex-rows-child-wide"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-break"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
</div>
</div>
<div class="post-content-wrapper">
<div class="flex-rows">
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child flex-rows-child-wide"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-break flex-rows-break-invisible"></div>
<div class="flex-rows-child"></div>
<div class="flex-rows-child"></div>
</div>
</div>
<style>
.post-content-wrapper {
padding: 20px;
margin-bottom: 2em;
position: relative;
max-width: 820px;
margin-left: auto;
margin-right: auto;
background-color: #f7f7f7;
border-radius: 7px;
box-sizing: border-box;
}
.flex-rows {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px 20px 5px 20px;
}
.flex-rows-child {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
height: 60px;
flex-grow: 1;
margin-bottom: 2%;
}
.flex-rows-child-wide {
flex-grow: 3;
}
.flex-rows-child + .flex-rows-child {
margin-left: 2%;
}
.flex-rows-break {
flex-basis: 100%;
height: 0;
margin: 0;
border: 1px solid #ddd;
margin-bottom: 2%;
}
.flex-rows-break-invisible {
border: 0;
margin: 0;
}
.flex-rows-columns {
flex-direction: column;
height: 300px;
}
.flex-rows-columns .flex-rows-child {
height: auto;
width: 30%;
margin-left: 0;
}
.flex-rows-columns .flex-rows-break {
width: 0;
height: auto;
}
.break-column {
flex-basis: 100%;
width: 0;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment