How to center divs at every breakpoint with flexbox? - html

Question

I want to center the divs how I currently have them, but the issue is that when there are two divs they are not aligning with the rectangle above. I know that they would align with justify-content:space between, but that would prevent a div from being centered when it is the only one in the row. Is it possible what I want to do?
.wrapper {
max-width: 1000px;
margin: 0 auto
}
.title {
width: 100%;
height: 100px;
background: green;
margin-bottom: 30px;
}
.outer {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col {
/* flex-grow, flex-shrink, flex-basis*/
flex: 0 0 31%;
margin: 0 1% 2% 1%;
height: 300px;
}
.col1 {
background-color: red;
}
.col2 {
background-color: blue
}
.col3 {
background: black;
}
#media only screen and (max-width: 960px) {
.col {
flex: 0 0 48%;
}
}
#media only screen and (max-width: 480px) {
.col {
flex: 0 0 100%;
}
}
<div class="wrapper">
<div class="title">
</div>
<div class="outer">
<div class="col col1">
</div>
<div class="col col2">
</div>
<div class="col col3">
</div>
</div>
</div>

Answer 1

You can set a margin-left: auto to the .col1 and margin-right: auto to the .col2to push the divs respectively.
.wrapper {
max-width: 1000px;
margin: 0 auto
}
.title {
width: 100%;
height: 100px;
background: green;
margin-bottom: 30px;
}
.outer {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col {
/* flex-grow, flex-shrink, flex-basis*/
flex: 0 0 31%;
margin: 1% 0 2% 0;
height: 300px;
}
.col1 {
background-color: red;
margin-right: auto;
}
.col2 {
background-color: blue;
margin-left: auto;
}
.col3 {
background: black;
}
#media only screen and (max-width: 960px) {
.col {
flex: 0 0 48%;
}
}
#media only screen and (max-width: 480px) {
.col {
flex: 0 0 100%;
}
}
<div class="wrapper">
<div class="title">
</div>
<div class="outer">
<div class="col col1">
</div>
<div class="col col2">
</div>
<div class="col col3">
</div>
</div>
</div>