|
<!doctype html>
<html>
<head>
<title>A responsive grid using css flexbox.</title>
<meta charset="utf-8" />
<style type="text/css">
.grid {
display: flex;
flex-flow: row wrap;
/*width: 40em;*/
}
.grid > div {
flex: 0 1 auto;
min-width: 5em;
min-height: 5em;
margin: 0.5em 1em;
}
.grid > div:hover { opacity: 0.75; }
.grid > .larger {
flex: 4 1 auto;
}
.red { background-color: #e02f56; }
.green { background-color: #1ed66b; }
</style>
</head>
<body>
<h1>A responsive grid using css flexbox</h1>
<p>By setting <code>flex-flow: row wrap;</code> on the grid container
we display the elements inside it as rows that wrap when they are
too large for fitting on one line.</p>
<p>Resize your browser window to have some more fun.</p>
<p>Firefox doesn't seem to support the <code>flex-flow</code> property yet,
so you'd want to use a polyfill.</p>
<div class="grid">
<div class="red"></div>
<div class="red"></div>
<div class="red larger"></div>
<div class="red"></div>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red larger"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red larger"></div>
<div class="red"></div>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red larger"></div>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</div>
</body>
</html>
|
