Skip to content

Instantly share code, notes, and snippets.

@wpfangirl

wpfangirl/01-flex-defaults.html

Last active October 22, 2016 19:36
Show Gist options
  • Save wpfangirl/3854fd0f7010761dc66ee6db10c997e4 to your computer and use it in GitHub Desktop.
Save wpfangirl/3854fd0f7010761dc66ee6db10c997e4 to your computer and use it in GitHub Desktop.
Download ZIP
WCSAC 2016 Flexbox Files
Raw
01-flex-defaults.html
<html>
<head>
<style>
body {
font-family: sans-serif;
font-size: 20px;
}
.flex-container {
border: 4px solid #09f;
height: 50vh;
padding: 20px;
margin: 20px;
display: flex;
}
.flex-item {
border: 2px solid #000;
margin: 10px;
padding: 10px;
color: #fff;
background-color: #3366cc;
text-align: center;
flex: 0 1 auto;
}
</style>
</head>
<body>
<h3>Flex Container</h3>
<div class="flex-container">
<div class="flex-item">
<p>Flex Item</p>
</div>
<div class="flex-item">
<p>Flex Item</p>
</div>
<div class="flex-item">
<p>Flex Item</p>
</div>
</div>
</body>
</html>
Raw
02-vertical-centering.html
<html>
<head>
<style>
body {
font-family: sans-serif;
font-size: 20px;
}
.flex-container {
border: 4px solid #09f;
height: 50vh;
padding: 20px;
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.flex-item {
border: 2px solid #000;
margin: 10px;
padding: 10px;
color: #fff;
background-color: #3366cc;
text-align: center;
flex: 0 1 auto;
}
</style>
</head>
<body>
<h3>Flex Container</h3>
<div class="flex-container">
<div class="flex-item">
<p>Flex Item</p>
</div>
</div>
</body>
</html>
Raw
03-equal-height.html
<html>
<head>
<style>
body {
font-family: sans-serif;
font-size: 20px;
}
.flex-container {
border: 4px solid #09f;
height: 50vh;
padding: 20px;
margin: 20px;
display: flex;
align-items: stretch;
justify-content: center;
}
.flex-item {
border: 2px solid #000;
margin: 10px;
padding: 10px;
color: #fff;
background-color: #3366cc;
flex: 0 1 400px;
}
</style>
</head>
<body>
<h3>Flex Container</h3>
<div class="flex-container">
<div class="flex-item">
<h4>Flex Item</h4>
<p>This is a flex-item.</p>
</div>
<div class="flex-item">
<h4>Flex Item</h4>
<p>This is a second flex-item.</p>
<p>It has two paragraphs</p>
</div>
<div class="flex-item">
<h4>Flex Item</h4>
<p>This is a third flex-item.</p>
<p>It has a second paragraph.</p>
<p>And a third paragraph.</p>
</div>
</div>
</body>
</html>
Raw
04-wrapping.html
<html>
<head>
<style>
body {
font-family: sans-serif;
font-size: 20px;
}
.flex-container {
border: 4px solid #09f;
padding: 20px;
margin: 20px;
display: flex;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
}
.flex-item {
border: 2px solid #000;
margin: 10px;
padding: 10px;
color: #fff;
background-color: #3366cc;
flex: 1 1 150px;
}
</style>
</head>
<body>
<h3>Flex Container</h3>
<div class="flex-container">
<div class="flex-item">
<h4>Flex Item</h4>
<p>This is a flex-item.</p>
</div>
<div class="flex-item">
<h4>Flex Item</h4>
<p>This is a second flex-item.</p>
</div>
<div class="flex-item">
<h4>Flex Item</h4>
<p>This is a third flex-item.</p>
</div>
<div class="flex-item">
<h4>Flex Item</h4>
<p>This is a fourth flex-item.</p>
</div>
<div class="flex-item">
<h4>Flex Item</h4>
<p>This is a fifth flex-item.</p>
</div>
<div class="flex-item">
<h4>Flex Item</h4>
<p>This is a sixth flex-item.</p>
</div>
</div>
</body>
</html>
Raw
05-space-between.html
<html>
<head>
<style>
body {
font-family: sans-serif;
font-size: 20px;
}
.flex-container {
border: 4px solid #09f;
height: 50vh;
padding: 20px;
margin: 20px;
display: flex;
align-items: stretch;
justify-content: space-between;
}
.flex-item {
border: 2px solid #000;
margin: 10px;
padding: 10px;
color: #fff;
background-color: #3366cc;
flex: 0 1 400px;
}
</style>
</head>
<body>
<h3>Flex Container</h3>
<div class="flex-container">
<div class="flex-item">
<h4>Flex Item</h4>
</div>
<div class="flex-item">
<h4>Flex Item</h4>
</div>
</div>
</body>
</html>
Raw
06-ordering.html
<html>
<head>
<style>
body {
font-family: sans-serif;
font-size: 20px;
margin: 60px 0;
}
.flex-container {
background-color: #333;
padding: 40px;
display: flex;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
}
.image {
background-color: #3366cc;
color: #fff;
padding: 10px;
height: 200px;
flex: 1 1 200px;
}
.content {
background-color: #fff;
padding: 10px;
flex: 1 1 600px;
}
@media only screen and (min-width:800px) {
.flex-container:nth-of-type(odd) .image {
order: -1;
}
.flex-container:nth-of-type(even) .image {
order: 1;
}
}
</style>
</head>
<body>
<h3>Flex Order Checkerboard</h3>
<div class="flex-container">
<div class="image">
<h4>Featured Image</h4>
</div>
<div class="content">
<h4>This is the Post Title</h4>
<p>This is the post content.</p>
</div>
</div>
<div class="flex-container">
<div class="image">
<h4>Featured Image</h4>
</div>
<div class="content">
<h4>This is the Post Title</h4>
<p>This is the post content.</p>
</div>
</div>
<div class="flex-container">
<div class="image">
<h4>Featured Image</h4>
</div>
<div class="content">
<h4>This is the Post Title</h4>
<p>This is the post content.</p>
</div>
</div>
<div class="flex-container">
<div class="image">
<h4>Featured Image</h4>
</div>
<div class="content">
<h4>This is the Post Title</h4>
<p>This is the post content.</p>
</div>
</div>
</body>
</html>
Raw
07-auto-margins.html
<html>
<head>
<style>
body {
font-family: sans-serif;
font-size: 20px;
margin: 60px 0;
}
.flex-container {
background-color: #333;
padding: 20px;
margin:20px;
display: flex;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
}
.flex-item {
background-color: #fff;
flex: 1 1 320px;
margin-right:20px;
padding: 20px;
border: 1px solid #ccc;
display:flex;
flex-direction:column;
justify-content: space-between;
}
.image {
flex: 0 1 200px;
background-color: #3366cc;
color: #fff;
padding: 10px;
}
.content {
flex: 0 1 auto;
background-color: #fff;
padding: 10px;
}
.buttons {
align-self:center;
margin-top:auto;
margin-bottom: 20px;
}
.button {
padding: 20px;
border: 2px solid #000;
}
a.button {
color: #000;
text-decoration: none;
}
.button:hover {
background-color: #000;
border: 1px solid #fff;
color: #fff;
}
</style>
</head>
<body>
<h3>Nested Flexboxes with Auto Margin</h3>
<div class="flex-container">
<div class="flex-item">
<div class="image">
<h4>Featured Image</h4>
</div>
<div class="content">
<h4>This is the Post Title</h4>
<p>This is a short post excerpt.</p>
</div>
<div class="buttons"><a class="button" href="#">Read Now</a></div>
</div>
<div class="flex-item">
<div class="image">
<h4>Featured Image</h4>
</div>
<div class="content">
<h4>This is the Post Title</h4>
<p>This is a longer post excerpt. It has two sentences.</p>
</div>
<div class="buttons"><a class="button" href="#">Read Now</a></div>
</div>
<div class="flex-item">
<div class="image">
<h4>Featured Image</h4>
</div>
<div class="content">
<h4>This is the Post Title</h4>
<p>This is a much longer post excerpt. No two real-life excerpts are ever the same length. That's why I'm positioning the buttons with auto margins.</p>
</div>
<div class="buttons"><a class="button" href="#">Read Now</a></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment