How to center 2 rows with flexbox? [duplicate] - html

Question

This question already has answers here:
How to center a flex container but left-align flex items
(9 answers)
Closed 5 years ago.
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

Answer 1

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>

Answer 2

.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>