Skip to content

Instantly share code, notes, and snippets.

@kswedberg

kswedberg/index.html

Created April 21, 2015 14:07
Show Gist options
  • Save kswedberg/9229c8a4895f11118db7 to your computer and use it in GitHub Desktop.
Save kswedberg/9229c8a4895f11118db7 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/tarequ
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.list {
display: flex;
flex-wrap: wrap;
}
.list-item {
/* make lis display:flex to provide context for the paragraphs' flex inside */
display: flex;
/* mobile first width */
width: 100%;
}
.list-content {
display: flex;
flex-direction: column;
background-color: #fff;
padding: 1em;
width: 100%;
}
.list-content p {
flex: 1 0 auto;
/* above is equivalent to:
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
*/
}
@media (min-width: 350px) {
.list-item {
width: 50%;
}
}
@media (min-width: 700px) {
.list-item {
width: 33.3%;
}
}
/********************************* */
/* purely decorative */
.list {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
.list-item {
box-sizing: border-box;
background-color: #fff;
outline: 1px solid #ccc;
padding: 6px;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Flexbox example</h1>
<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<img src="" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<a href="">Link</a>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit ipsum dolor sit amet, consectetur adipisicing elit dolor sit amet, consectetur adipisicing elit dolor sit amet, consectetur adipisicing elit</p>
<a href="">Link</a>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<a href="">Link</a>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<img src="http://fillmurray.com/301/500" alt="Bill Murray 301x500" width="301" height="500">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<a href="">Link</a>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit ipsum dolor sit amet, consectetur adipisicing elit dolor sit amet, consectetur adipisicing elit dolor sit amet, consectetur adipisicing elit</p>
<a href="">Link</a>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<a href="">Link</a>
</div>
</li>
</ul>
<script id="jsbin-source-css" type="text/css">.list {
display: flex;
flex-wrap: wrap;
}
.list-item {
/* make lis display:flex to provide context for the paragraphs' flex inside */
display: flex;
/* mobile first width */
width: 100%;
}
.list-content {
display: flex;
flex-direction: column;
background-color: #fff;
padding: 1em;
width: 100%;
}
.list-content p {
flex: 1 0 auto;
/* above is equivalent to:
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
*/
}
@media (min-width: 350px) {
.list-item {
width: 50%;
}
}
@media (min-width: 700px) {
.list-item {
width: 33.3%;
}
}
/********************************* */
/* purely decorative */
.list {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
.list-item {
box-sizing: border-box;
background-color: #fff;
outline: 1px solid #ccc;
padding: 6px;
}
img {
max-width: 100%;
height: auto;
}</script>
</body>
</html>
Raw
jsbin.tarequ.css
.list {
display: flex;
flex-wrap: wrap;
}
.list-item {
/* make lis display:flex to provide context for the paragraphs' flex inside */
display: flex;
/* mobile first width */
width: 100%;
}
.list-content {
display: flex;
flex-direction: column;
background-color: #fff;
padding: 1em;
width: 100%;
}
.list-content p {
flex: 1 0 auto;
/* above is equivalent to:
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
*/
}
@media (min-width: 350px) {
.list-item {
width: 50%;
}
}
@media (min-width: 700px) {
.list-item {
width: 33.3%;
}
}
/********************************* */
/* purely decorative */
.list {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
.list-item {
box-sizing: border-box;
background-color: #fff;
outline: 1px solid #ccc;
padding: 6px;
}
img {
max-width: 100%;
height: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment