maxspan maxspan - 5 months ago 13
CSS Question

Using Flex to show 3 columns per Row

Hi I have been trying to show 3 columns per row. I it possible using Html5 Flex.

My current css is something like this:

.mainDiv {
display: flex;
margin-left: 221px;
margin-top: 43px;
}


This code makes all content in a single row.
I want to put a constraint that it just shows 3 record per row.

Answer

This may be what you are looking for:

http://jsfiddle.net/L4L67/

HTML

<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

CSS

body > div {
    background: #aaa;
    display: flex;
    flex-wrap: wrap;
}
body > div > div {
    flex-grow: 1;
    width: 33%;
    height: 100px;
}
body > div > div:nth-child(even) {
    background: #23a;
}
body > div > div:nth-child(odd) {
    background: #49b;
}