Flex centererd grid with dynamic number of columns

Question

I'd like to have a simple flex-wrap, with fixed margin between blocks, and make all that centered.

The last row should be aligned to the left of the previously centered blocks if it's not complete.

Here is what I've tried:

<div class="flow">
    <div class="flow2">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

CSS :

.flow {
    display: flex;
    justify-content: center; /* Does nothing */
}

.flow2 {
    display: flex;
    flex-wrap: wrap;
}

.block {
    width: 300px;
    height: 66px;
    margin-right: 15px;
    margin-left: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin-bottom: 10px;
}

Here is a fiddle to try that: http://jsfiddle.net/oe76j64L/2/

I'd like everything to be like that inside flow2, except centered inside flow. This should stay consistent when I resize the view.

How can I achieve that using CSS ?

Here is a roughly drawn picture for more explanation: https://i.stack.imgur.com/rhp1e.png

Up, what i have, Down, what I want.

Having a difficult time understanding what you're trying to achieve. Why not add justify-content: center; to .flow2? — Serg Chernata, Feb 01 '17 at 16:19
@SergChernata I've added a picture ( http://i.imgur.com/LvOSwXV.png ) — blue112, Feb 01 '17 at 16:22
Still don't understand. Can you show what we're supposed to be seeing currently and then what you want it to look like? All of that looks like your current fiddle. — Serg Chernata, Feb 01 '17 at 16:23
@SergChernata Edited my post with a new image: https://i.imgur.com/72THROG.png — blue112, Feb 01 '17 at 16:26
It's very hard to acheive with pixel width blocks. Can you make the block with a percentage instead? Also you should limit the width of flex2 and use `margin: 0 auto` to center it. — Carol Skelly, Feb 01 '17 at 17:07
this is not a duplicate. I can align everything when I left-align the grid, but when I center it it doesn't work. — blue112, Feb 02 '17 at 08:30

Flex centererd grid with dynamic number of columns

0 Answers0