Skip to content

Instantly share code, notes, and snippets.

@gaurangrshah

gaurangrshah/final-style.css

Last active September 12, 2018 23:25
Show Gist options
  • Save gaurangrshah/597bcbeef01fd2caae42ed1b417e6615 to your computer and use it in GitHub Desktop.
Save gaurangrshah/597bcbeef01fd2caae42ed1b417e6615 to your computer and use it in GitHub Desktop.
Download ZIP
Freecode Camp Clifton Flexbox Starter
Raw
final-style.css
body {
box-sizing: border-box;
padding: 10px;
}
.col-1 {
width: 20vw;
}
.col-2 {
width: 25vw;
}
.col-3 {
width: 33vw;
}
.col-4 {
width: 50vw;
}
.col-5 {
width: 66vw;
}
.col-6 {
width: 80vw;
}
.col-7 {
width: 100vw;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7 {
padding: 20px;
margin: 0 5px 0 5px;
background: lightblue;
}
.row {
display: flex;
flex-flow: row nowrap; /* default */
justify-content: flex-start;
align-items: stretch;
margin: 0 0 20px 0;
}
@media screen and (max-width:600px) {
.row {
flex-direction: column;
flex-wrap: nowrap;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7 {
color: white;
flex: 0 0 auto;
/* flex-basis: auto - defers sizing to the width property.*/
width: 100vw;
margin: 5px 0 5px 0;
}
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flex Grid</title>
</head>
<body>
<div class="row">
<div class="col-4">This little piggy went to market.</div>
<div class="col-4">This little piggy stayed home.</div>
</div>
<div class="row">
<div class="col-3">This little piggy went to market.</div>
<div class="col-3">This little piggy stayed home.</div>
<div class="col-3">This little piggy had roast beef.</div>
</div>
<div class="row">
<div class="col-2">This little piggy went to market.</div>
<div class="col-2">This little piggy stayed home.</div>
<div class="col-2">This little piggy had roast beef.</div>
<div class="col-2">This little piggy had none.</div>
</div>
<div class="row">
<div class="col-1">This little piggy went to market.</div>
<div class="col-1">This little piggy stayed home.</div>
<div class="col-1">This little piggy had roast beef.</div>
<div class="col-1">This little piggy had none.</div>
<div class="col-1">This little piggy went all the way home.</div>
</div>
<div class="row">
<div class="col-1">This little piggy went to market.</div>
<div class="col-6">This little piggy stayed home.</div>
</div>
<div class="row">
<div class="col-5">This little piggy went to market.</div>
<div class="col-3">This little piggy stayed home.</div>
</div>
<div class="row">
<div class="col-7">This little piggy went to market.</div>
</div>
</body>
</html>
Raw
style.css
body {
box-sizing: border-box;
}
.row {
display: block;
margin: 0 0 20px 0;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7 {
padding: 20px;
margin: 0 5px 0 5px;
/* background: lightblue; */
}
/*
.col-1 {
width: 20vw;
}
.col-2 {
width: 25vw;
}
.col-3 {
width: 33vw;
}
.col-4 {
width: 50vw;
}
.col-5 {
width: 66vw;
}
.col-6 {
width: 80vw;
}
.col-7 {
width: 100vw;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment