Staggering items in CSS with flexbox - html

Question

I'm trying to create a staggered layout in CSS, where each row only has one item, but it will be offset from the items on the other rows.
I've made two working examples so far, but I'm wondering if there is a better way to achieve this.
Here's an example I made using spacer divs :
http://cdpn.io/e/EWrMgL
HTML :
<div class="container">
<div class="row">
<div class="spacer">(spacer)</div>
<div class="content col-2">content 2</div>
<div class="spacer">(spacer)</div>
</div>
<div class="row">
<div class="content col-1">content 1</div>
<div class="spacer">(spacer)</div>
<div class="spacer">(spacer)</div>
</div>
<div class="row">
<div class="spacer">(spacer)</div>
<div class="spacer">(spacer)</div>
<div class="content col-3">content 3</div>
</div>
<div class="row">
<div class="spacer">(spacer)</div>
<div class="spacer">(spacer)</div>
<div class="content col-3">content 3</div>
</div>
</div>
CSS :
.container, .spacer, .content, .row {
display: flex;
}
.container {
flex-flow: row wrap;
font-family: sans-serif;
}
.row {
width: 100%
}
.spacer {
color: #2c3e50;
flex: 1 1 0%;
}
.content {
color: #ecf0f1;
flex : 3 1 0%;
flex-basis: 60%
}
.content, .spacer {
justify-content: center;
align-items: center;
min-height: 5em;
margin: 0.5em;
}
.col-1 {
background-color: #96858F;
}
.col-2 {
background-color:#9099A2;
}
.col-3 {
background-color: #6d7993;
}
I made another attempt at a cleaner version using margins instead of wrapping
each item in a row : http://cdpn.io/e/xqMBmB
HTML:
<div class="container">
<div class="content col-2">content 2</div>
<div class="content col-1">content 1</div>
<div class="content col-3">content 3</div>
<div class="content col-3">content 3</div>
</div>
CSS:
.container, .content{
display: flex;
}
.container {
flex-flow: row wrap;
font-family: sans-serif;
}
.content {
color: #ecf0f1;
flex: 0 1 70%;
justify-content: center;
align-items: center;
min-height: 5em;
margin-bottom: 0.5em;
}
.col-1 {
background-color: #96858F;
}
.col-2 {
background-color:#9099A2;
margin-left: 7.5%;
}
.col-3 {
background-color: #6d7993;
margin-left: 15%;
}
Is there a cleaner way to do this than enclosing each row in a div or changing the margins? I'll want to add #media rules to make the rows 100% width below a certain screen size.

Answer 1

If you change to flex-direction: column and remove wrap, the 2:nd will behave as the 1:st
I also added a media query to drop the left margin at a small width.
With this markup it's also easier to change order and layout, and is most likely the best way to do it.
.container, .content{
display: flex;
}
.container {
flex-direction: column;
font-family: sans-serif;
}
.content {
color: #ecf0f1;
justify-content: center;
align-items: center;
min-height: 5em;
margin-bottom: 0.5em;
}
.col-1 {
background-color: #96858F;
}
.col-2 {
background-color:#9099A2;
margin-left: 7.5%;
}
.col-3 {
background-color: #6d7993;
margin-left: 15%;
}
#media screen and (max-width: 500px) {
.content {
margin-left: 0;
}
}
<div class="container">
<div class="content col-2">content 2</div>
<div class="content col-1">content 1</div>
<div class="content col-3">content 3</div>
<div class="content col-3">content 3</div>
</div>
You can also size them, like this
.container, .content{
display: flex;
}
.container {
flex-direction: column;
font-family: sans-serif;
}
.content {
width: 70%;
color: #ecf0f1;
justify-content: center;
align-items: center;
min-height: 5em;
margin-bottom: 0.5em;
}
.col-1 {
background-color: #96858F;
}
.col-2 {
background-color:#9099A2;
margin-left: 7.5%;
}
.col-3 {
background-color: #6d7993;
margin-left: 15%;
}
#media screen and (max-width: 500px) {
.content {
margin-left: 0;
width: 100%;
}
}
<div class="container">
<div class="content col-2">content 2</div>
<div class="content col-1">content 1</div>
<div class="content col-3">content 3</div>
<div class="content col-3">content 3</div>
</div>

Answer 2

Your second version of the code is fine, it's simple enough. What I would suggest though instead of using specific margins is to use auto margins, change the size of the items to 100% and then specify a max-width so that on smaller devices they will be full width and on larger screens they won't. Here's an example of the CSS for this:
.container, .content{
display: flex;
}
.container {
flex-flow: row wrap;
font-family: sans-serif;
}
.content {
color: #ecf0f1;
flex: 0 1 100%; /* CHANGE */
max-width: 800px; /* CHANGE */
justify-content: center;
align-items: center;
min-height: 5em;
margin-bottom: 0.5em;
}
.col-1 {
background-color: #96858F;
}
.col-2 {
background-color:#9099A2;
margin-left: auto; /* CHANGE */
margin-right: auto; /* CHANGE */
}
.col-3 {
background-color: #6d7993;
margin-left: auto;
}
Maybe that is the result you're after? If not something along those lines should be fine. Using media queries as you suggested would also work, changing the flex size from 70% to 100% below a certain width. You could do that by adding something like the below to the end of your CSS:
#media screen and (max-width: 600px) {
.content {
flex: 0 1 100%;
}
}
Hopefully this will point you in the right direction.