How to fix div child of parent center when "float:left"? - html

Question

I tried to center child divs inside a parent div. Quantity of child div is dynamic and I make "float: left". But group of child divs can't center inside a parent div.
Parent div static width: 800px;
Child divs static width: 360px; height: 320px.
Here my code:
* {
box-sizing: border-box;
}
.parent {
width: 800px;
display: flex;
justify-content: center;
background-color: #f8f9fb;
}
.child {
width: 360px;
margin: 7px;
min-width: 360px;
height: 320px;
float: left;
background-color: #FFFF;
border: 1px solid;
}
<div class="parent">
<div class="content">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
Some way I references but not in my case:
- http://jsfiddle.net/h9H8w/12/
- https://dev.to/stel/a-little-trick-to-left-align-items-in-last-row-with-flexbox-230l
- https://codepen.io/anon/pen/JbpPKa
My results like that:
- https://imgur.com/TX9I4vq
- https://imgur.com/NiRaHgj
Thanks for reading and sorry my bad english.
========================================================
From the help of #kukkuz. I changed my code:
* {
box-sizing: border-box;
}
.parent {
max-width: 800px;
display: grid;
justify-content: center;
background-color: #f8f9fb;
grid-template-columns: repeat( auto-fit, 360px);
grid-gap: 7px;
}
.child {
width: 360px;
/*margin: 7px;*/
min-width: 360px;
height: 320px;
/* float: left;*/
background-color: #FFFF;
border: 1px solid;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

Answer 1

Is this what u want,
Basically I removed the float:left and the content div
justify-content: center; will handle the centering of the boxes,
Uncomment flex-wrap:wrap; to wrap the children on to the next line
Know that, making a div display:flex, will make its children flex-items, which was not happening in your case
* {
box-sizing: border-box;
}
.parent {
width: 800px;
display: flex;
justify-content: center;
background-color: #f8f9fb;
/*flex-wrap:wrap;*/
}
.child {
width: 36px;
margin: 7px;
min-width: 36px;
height: 32px;
background-color: #FFFF;
border: 1px solid;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>