html - How to force a flex box to display 4 items per row? -
i'm using flex box display 8 items dynamically resize page. how force split items 2 rows? (4 per row)?
here relevant snip:
(or if prefer jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/)
.parent-wrapper { height: 100%; width: 100%; border: 1px solid black; } .parent { display: flex; font-size: 0; flex-wrap: wrap; margin: -10px 0 0 -10px; } .child { display: inline-block; background: blue; margin: 10px 0 0 10px; flex-grow: 1; height: 100px; }<body> <div class="parent-wrapper"> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </div> </body>
add width .child elements. use percentages on margin-left if want have 4 per row.
.child { display: inline-block; background:blue; margin:10px 0 0 2%; flex-grow: 1; height:100px; width: calc(100% * (1/4) - 10px - 1px); }