How to center 2 rows with flexbox?

Question

Hello I have the following bit of code but i'm struggling to sort out a layout issue. Ideally i would like the rows to go from left to right as shown in the picture but I would like to center the entire structure.

Currently have

But I would like this

This is the css and code i'm currently using.

<div class="service_list_container">
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
        </div>

.service_list_container {
    background: blue;
    display: flex; /* or inline-flex */
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.service_tab {
    flex-basis: 300px;
    flex-grow: 0;
    flex-shrink: 0;
    height: 400px;
    background: #fff;
    margin: 10px 20px;
    -webkit-box-shadow: -2px -1px 5px 0px #efefef;
    -moz-box-shadow: -2px -1px 5px 0px #efefef;
    box-shadow: -2px -1px 5px 0px #efefef;
    border: solid 1px #e8e8e8;
}

Is it possible using flexbox to achieve what I am after? Thanks

This `justify-content: space-evenly;` does not exist. Did you mean `justify-content: space-between;` or `justify-content: space-around;`? — Paulie_D, Aug 01 '17 at 11:34
@Paulie_D, *space-evenly* is part of the CSS Box Alignment Module. It's currently supported by Firefox only. https://stackoverflow.com/a/45134997/3597276 — Michael Benjamin, Aug 01 '17 at 11:45

score 3 · Accepted Answer · answered Aug 01 '17 at 11:47

You need to use flex-basis: 30%; instead of flex-basis: 300px;

.service_list_container {
    background: blue;
    display: flex; /* or inline-flex */
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.service_tab {
    flex-basis: 30%;
    flex-grow: 0;
    flex-shrink: 0;
    height: 400px;
    background: #fff;
    margin: 10px 1.5%;
    -webkit-box-shadow: -2px -1px 5px 0px #efefef;
    -moz-box-shadow: -2px -1px 5px 0px #efefef;
    box-shadow: -2px -1px 5px 0px #efefef;
    border: solid 1px #e8e8e8;
}

<div class="service_list_container">
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
        </div>

Actually for 3 items per row the closest I can get is margin: 10px 1.66%; — ORStudios, Aug 01 '17 at 11:52

score 0 · Answer 2 · answered Aug 01 '17 at 11:27

.service_tab { flex-grow: 1; }

instead of

.service_tab { flex-grow: 1; }

.service_list_container {
    background: blue;
    display: flex; /* or inline-flex */
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.service_tab {
    flex-basis: 300px;
    flex-grow: 1;
    flex-shrink: 0;
    height: 400px;
    background: #fff;
    margin: 10px 20px;
    -webkit-box-shadow: -2px -1px 5px 0px #efefef;
    -moz-box-shadow: -2px -1px 5px 0px #efefef;
    box-shadow: -2px -1px 5px 0px #efefef;
    border: solid 1px #e8e8e8;
}

<div class="service_list_container">
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
            <div class="service_tab"></div>
        </div>

That doesn't work because when I have a row with say 2 items it increases the width of those items to fit what would be space for 3 — ORStudios, Aug 01 '17 at 11:30
@ORStudios flex-basis: 300px; to adjust the number of item showing. just give flex-basis: 200px; and check it. — Dhaarani, Aug 01 '17 at 11:33

How to center 2 rows with flexbox?

2 Answers2