Center div's inside a div [duplicate] - css

Question

This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 3 years ago.
I need to center a div and inside the div there are more div's like the picture.
But the div's inside should go to the left site of the outer div.
How can I achive this?
The cards are arranged with Flexbox. Image
//outer div
.cards {
display: flex;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
// inner div's
.card-inner {
background: #cecdcd;
color: #000;
position: relative;
width: 110px;
height: 110px;
margin: 8px auto;
overflow: hidden;
word-wrap: break-word;
border-radius: 10px;
transition: 200ms;
}
<div class="cards" #end="checkMove">
<l-card
class="card-inner"
v-for="card in filterCards"
:key="card.uuid"
:data="card"
#open-card="openCard($event)"
></l-card>
</div>

Answer 1

Below is solution using flex
.flex-wrap {
display: flex;
justify-content: flex-start;
align-content: stretch;
flex-wrap: wrap;
justify-content: space-around;
}
.flex-inner {
display: flex;
height: 100px;
width: 25%;
align-items: center;
justify-content: center;
background-color: #ccc;
margin: 15px;
}
<div class="flex-wrap">
<div class="flex-inner">
content
</div>
<div class="flex-inner">
content
</div>
<div class="flex-inner">
content
</div>
<div class="flex-inner">
content
</div>
<div class="flex-inner">
content
</div>
<div class="flex-inner">
content
</div>
<div class="flex-inner">
content
</div>
<div class="flex-inner">
content
</div>
<div class="flex-inner">
content
</div>
<div class="flex-inner">
content
</div>
<div class="flex-inner">
content
</div>
</div>

Answer 2

Should be something like in flexbox:
.cards {
display: flex;
flex-direction: row;
flex-flow: row wrap;
justify-content: flex-start;
}
.card-inner {
display: flex;
flex: 0 0 110px;
height: 110px;
margin: 8px;
justify-content: center;
align-items: center;
background: #cecdcd;
color: #000;
border-radius: 10px;
}
<div class="cards">
<div class="card-inner">
Example
</div>
<div class="card-inner">
Example
</div>
<div class="card-inner">
Example
</div>
<div class="card-inner">
Example
</div>
<div class="card-inner">
Example
</div>
<div class="card-inner">
Example
</div>
<div class="card-inner">
Example
</div>
<div class="card-inner">
Example
</div>
<div class="card-inner">
Example
</div>
<div class="card-inner">
Example
</div>
<div class="card-inner">
Example
</div>
<div class="card-inner">
Example
</div>
<div class="card-inner">
Example
</div>
<div class="card-inner">
Example
</div>
</div>